组件的动态挂载
弹窗aaa.vue
<template>
<el-dialog
width="700px "
v-dialog-out
destroy-on-close
v-if="dialogVisible"
:title="title"
:visible="dialogVisible"
:before-close="hideDialog"
:close-on-click-modal="false"
>
<div class="dialog-body">
</div>
<div class="dialog-footer">
<el-button @click="hideDialog">取 消</el-button>
<el-button type="primary" @click="validateForm">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: "aaa",
components: {},
props: {},
data() {
return {
dialogVisible: false,
title: "",
};
},
methods: {
showDialog(data) {
console.log(data);
this.dialogVisible = true;
this.title = data.type;
if (data.data) {
this.getDetail(data.data.id);
}
},
hideDialog() {
this.dialogVisible = false;
this.$refs.form.resetFields();
this.formData = {};
this.$parent.getTableData();
this.fileUploadUtils.fileList = [];
},
getDetail(id) {
},
async validateForm() {
try {
if (await this.$refs.form.validate()) this.submitForm();
} catch (e) {}
},
submitForm() {
},
},
created() {},
mounted() {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
padding: 20px 0 0 !important;
}
.dialog-body {
padding: 0 20px;
max-height: 65vh;
overflow-y: auto;
}
.dialog-footer {
text-align: center;
padding: 10px 0 18px;
}
</style>
弹窗bbb.vue
<template>
<el-dialog
width="700px "
v-dialog-out
destroy-on-close
v-if="dialogVisible"
:title="title"
:visible="dialogVisible"
:before-close="hideDialog"
:close-on-click-modal="false"
>
<div class="dialog-body">
</div>
<div class="dialog-footer">
<el-button @click="hideDialog">取 消</el-button>
<el-button type="primary" @click="validateForm">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: "bbb",
components: {},
props: {},
data() {
return {
dialogVisible: false,
title: "",
};
},
methods: {
showDialog(data) {
console.log(data);
this.dialogVisible = true;
this.title = data.type;
if (data.data) {
this.getDetail(data.data.id);
}
},
hideDialog() {
this.dialogVisible = false;
this.$refs.form.resetFields();
this.formData = {};
this.$parent.getTableData();
this.fileUploadUtils.fileList = [];
},
getDetail(id) {
},
async validateForm() {
try {
if (await this.$refs.form.validate()) this.submitForm();
} catch (e) {}
},
submitForm() {
},
},
created() {},
mounted() {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
padding: 20px 0 0 !important;
}
.dialog-body {
padding: 0 20px;
max-height: 65vh;
overflow-y: auto;
}
.dialog-footer {
text-align: center;
padding: 10px 0 18px;
}
</style>
父组件中使用
<template>
<div>
<el-button
type="text"
size="small"
icon="iconfont if-biaodancaozuo-xiugai"
@click="doSomething(scope.row, '审批', 'aaa')"
>审批
</el-button>
<el-button
type="text"
size="small"
icon="iconfont if-biaodancaozuo-xiugai"
@click="doSomething(scope.row, '修改', 'bbb')"
>修改
</el-button>
<component :is="dialogName" ref="dialog"></component>
</divd>
</template>
export default {
data() {
return {
dialogName: undefined,
}
},
methods: {
doSomething(data, type, dialogName) {
this.dialogName = this.getDialog(dialogName);
this.$nextTick(() => {
this.$refs.dialog.showDialog({ data, type });
});
},
getDialog(name) {
return require(`@/views/maintenanceProject/engineeringManage/dialog/${name}.vue`).default;
},
}
}