vue + elementui 弹框面板的简便写法

弹框子组件 child-dialog.vue:

<template>
  <el-dialog
    v-if="show"
    title="提示信息"
    :visible.sync="show"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    width="80%"
    top="10vh"
  >
    <commonTable
      :tableColumns="tableColumns"
      :tableData="tableData"
      :hasPagination="false"
      :colWidth="0"
      :isAutoResize="true"
      :hasCheckBox="false"
    ></commonTable>
  </el-dialog>
</template>

<script>
import commonTable from "@/components/commonTable"; //表格
export default {
  components: {
    commonTable,
  },
  props:{
    panelData:{ //这里存放弹框需要的各种数据
      type:Object,
      default:()=>{
        return {};
      }
    }
  },
  data() {
    return {
      show:false, //面板的显示

      //表格
      tableColumns: [],   //表头数据
      tableData:[],       //表格数据
    };
  },
  methods: {
    onShow() { 
      this.show = true;
      this.getPageInitData();
    },
    closeDialog(){
      this.show = false;
    },
    getPageInitData(){
      axios.get(this.panelData.url,{params:this.panelData.param}).then(res=>{
        if(res.data.success){
          res.data.data.forEach(val=>{
            //表头数据
            if(val.id=="busuidatatable"){
              this.tableColumns = val.data[0].columns;
              this.tableData = this.panelData.tableData;  //表格body数据
            }
          })
        }else{
          this.$message({
            message: res.data.message,
            type: 'error',
            duration:2000
          });
        }  
      })
    },
  }
};
</script>
<style lang="scss">
.el-dialog__title,.el-dialog__close.el-icon.el-icon-close{
  color:#fff !important;
}
</style>

父组件中：

引用子组件：

import childDialog from "@/components/child-dialog"; 

使用：

<child-dialog :panelData="panelData" ref="childDialog"/>

如果需要打开面板：

this.$refs.childDialog.onShow();