Vue3框架&Element中的el-dialog对话框无法显示的问题及解决方法

wu-lyhower

已于 2024-12-23 10:10:19 修改

阅读量713

点赞数 6

文章标签： vue.js elementui

于 2024-12-23 10:04:35 首次发布

本文链接：https://blog.csdn.net/YourPasser/article/details/144621179

版权

这是vue2引入element的写法，vue2中使用是没问题的，因为:visible.sync是支持的。
但在vue3中引入的是element-plus，是不支持:visible.sync的。

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

解决方法：把:visible.sync改成v-model，原因在最底部

<el-dialog
  title="提示"
  v-model="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>这是一段信息</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

这是因为在vue3中引入element-plus，而element-plus更新的用法，如果你是从网上或者ai那里弄来的代码还在用vue2，尽管你强调了vue3，但它也没办法准确提示到这个解决方法。
其实最大的原因还是因为引入UI完全是不同的，得看相对应的官网文档。
特别注意：element和element-plus官网是不一样的。
element官网
 element-plus官网