specifications

Click the mileage in the query list, and the popup window will display the daily mileage of this data in this date range. The form will be displayed and you can download it

The development process

The original plan was to write the El-Dialog directly under the query list, but the el-table of the project was encapsulated, and the pop-up window to display the table would conflict with some method fields of the original page to display the table, so the pop-up window would be compontized.

Parent components communicate, passing visible and Params to child components, fetching events when clicked, and displaying pop-ups

<meterListDialog :visible="meterListCOnf.visible" @wathVisible='wathVisible()' v-if="meterListCOnf.visible" :params="meterListCOnf.params"></meterListDialog>


export default {
   components: {meterListDialog},
   data() {
       return(){
        meterListCOnf:{
              visible:false,
              params:{},
	  },
      }
   },
   methods(){
       meterList(row) {
         this.meterListCOnf.visible=true
         this.meterListCOnf.params = {
          ...
         };
       },
       wathVisible(){
         this.meterListCOnf.visible=false
       },
   }
}
Copy the code

Subcomponent code, visible control display, query data through Params, click close execute close use $emit call method wathVisible, close popup window, can also pass value.

props: { params: { type: Object, default: {} }, visible: { type: Boolean, default: },}, methods(){close() {//this.visible = false // Show is passed to the props, and cannot be modified inside the props. $emit('wathVisible'); }}Copy the code