控制Vue对话框显示隐藏
正确做法 — 使用 Vue 数据驱动控制显隐
你不需要手动设置 display: block
,因为 Element Plus 的 <el-dialog>
是基于 v-model
或 :visible.sync
控制的。
🔧 修改模板部分:
将原来的:
<el-dialog title="报文详情" v-show="dialogVisible">
改为:
<el-dialog title="报文详情" v-model="dialogVisible">
或者:
<el-dialog title="报文详情" :visible.sync="dialogVisible">
然后确保你在 data()
中定义了:
data() {
return {
dialogVisible: false,
dialogContent: ''
};
}
✅ 当你执行:
this.dialogVisible = true;
Element Plus 会自动把 .el-dialog__wrapper
的 display
改为 block
并显示出来。