vue + elementui 弹框面板的简便写法
<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.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 > .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();