最近今天在写一个停车场管理系统的项目时，在用vue3写前端时，在前端模板选择上，我一时脑抽，突然决定放弃SpringBoot，选择了以前几乎很少用的element-plus，然后果不其然，错误连连。最让我头疼的，就是dialog对话框无法显示的原因。

第一个原因：忘记将默认值修改为true。
简单说下逻辑，在element-plus中，你需要在data()方法中定义一个‘dialogVisible’值，不是dialogVisible也行，官网是这么定义的，其实就算你定义成‘wdnmd’也没有任何问题，如如：

data() {
 return {
   form: {},
   wdnmd: false
 }
},

这个'wdnmd'就相当于是否显示对话框的钥匙，默认定义为 false，就是不显示，一般dialog对话框不显示的原因，大概率就是你忘记在按钮的方法中wdnmd修改为true.例如：

methods: {
 editUser() {
   wdnmd = true
 },

第二个原因：将 :visible.sync="wdnmd"修改为v-model="wdnmd"(也是最蛋疼的一个原因)
例如：

将

<el-dialog  title="编辑"  :visible.sync="wdnmd" width="30%">
   <el-button @click="wdnmd = false">取消</el-button>
     <el-button type="primary" @click="save">修改</el-button>
     </span>
 </template>
</el-dialog>

修改为：

<el-dialog  title="编辑" v-model="wdnmd" width="30%">
   <el-button @click="wdnmd = false">取消</el-button>
     <el-button type="primary" @click="save">修改</el-button>
     </span>
 </template>
</el-dialog>

这是element-plus最新修改的用法，如果你是从网上或者ai那里弄来的代码，大概率是一脸懵逼（没错，我就是这样），这是最近半年左右element-plus更新的用法，智障ai和网上的大部分源码都远离这个时间段，甚至是用vue2。

总结
如果以后在遇到这样搞不清楚的问题，记得先从基础开始，也就是从官网开始。

我简单说下我解决这个问题的过程，先是debug，在控制台确认wdnmd的值确实被修改为true，我便开始怀疑不是我个人的问题，于是我开始上网搜索，网上的答案都试过，没有用后，进入element-plus官网，找到对应的el-dialog用法，将官方的模板在自己的电脑上跑一下，然后依次对比错误的代码，就是改一段测一段，最后找到了这个问题。

总之，找到代码错在何处，大部分看官网就完事了。 作者：怠惰の于 https://www.bilibili.com/read/cv23518098 出处：bilibili