Vue项目关于elementUI dialog弹窗组件的使用

需求说明

点击查询列表中行驶里程，弹窗展示这条数据在此日期区间中的每日里程，表单展示，可以下载

开发过程

原计划直接在查询列表下面写el-dialog，但是项目的el-table封装过，弹窗展示table，与原页面展示table一些方法字段会有冲突，所以将弹窗组件化。

父子组件通信，将visible和params传给子组件 ,当点击的时候调取事件，展示弹窗

<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
       },
   }
}

子组件代码，通过visible控制显示，通过params查询数据，点击关闭执行close使用$emit调用方法wathVisible，关闭弹窗，也可以传值。

props: {
        params: {
                type: Object,
                default: {}
        },
        visible: {
                type: Boolean,
                default: true
        },

},
methods(){
    close() {
            //this.visible = false
            //通过props传递给子组件的show，不能在子组件内部修改props中的show值。浏览器会报错
            this.$emit('wathVisible');
    }
}