关于Vue3中，element-plus的el-dialog对话框无法显示的某一解决方法

xiaohuang_student

于 2024-07-08 15:35:02 发布

阅读量416

点赞数 9

分类专栏： Vue学习文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/xiaohuangmonkey/article/details/140269735

版权

Vue学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题

在Vue3+element-plus中使用官方的对话框代码无法弹出正常弹出对话框。

官方无法显示的代码

在代码中能够生成按钮控件（如下图），但点击后无法显示内容

<!-- Table -->
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>

<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
  <el-table :data="gridData">
    <el-table-column property="date" label="日期" width="150"></el-table-column>
    <el-table-column property="name" label="姓名" width="200"></el-table-column>
    <el-table-column property="address" label="地址"></el-table-column>
  </el-table>
</el-dialog>


<script>
  export default {
    data() {
      return {
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false 
      };
    }
  };
</script>

按键控件可以正常生成，但是点击后无法显示对话框Dialog

解决方法

将原始的代码

<el-dialog title="收货地址" :visible.sync="dialogTableVisible">

修改成

<el-dialog title="收货地址" v-model="dialogTableVisible">

注意

如何导入了自动插件，会出现以下代码（v-model后会存在visible，仍需要删除）

<el-dialog title="收货地址" v-model:visible="dialogTableVisible">

完整代码

html部分

  <el-button type="text" @click="openDialog">打开嵌套表格的 Dialog</el-button>
  <!-- 打开的对话框 -->
  <el-dialog title="收货地址" v-model="dialogTableVisible">
    <el-table :data="gridData">
      <el-table-column property="date" label="日期" width="150"></el-table-column>
      <el-table-column property="name" label="姓名" width="200"></el-table-column>
      <el-table-column property="address" label="地址"></el-table-column>
    </el-table>
  </el-dialog>
  <br />

script部分

<script>
export default {
  data() {
    return {
      // 对话框对应数据
      dialogTableVisible: false,
      gridData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
  }
}