Vue ElementUI 弹框组件的快捷命名是什么？

本文共计391个文字，预计阅读时间需要2分钟。

弹框组件 child-dialog.vue：模板部分 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

弹框子组件 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();