dialog无法打开

小海海不怕困难

已于 2023-02-23 11:51:01 修改

阅读量1w

点赞数

分类专栏：前端文章标签： p2p linq gnu

于 2022-05-20 20:41:41 首次发布

本文链接：https://blog.csdn.net/weixin_55229531/article/details/124890111

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

错误截图：

点击两个按钮无法打开dialog

错误代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="/js/vue.js"></script>
    <script src="/js/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="/js/element-ui/lib/theme-chalk/index.css">
    <script src="/js/axios.js"></script>
</head>
<body>

<div id="app">

    <el-dialog title="测试一" :visible.sync="dialogTableVisible1">
        <el-table >
            <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>

    <el-dialog title="测试二" :visible.sync="dialogTableVisible2">
        <el-table >
            <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>


    <el-button type="text" @click="dialogFormVisible1 = true">测试一</el-button>
    <el-button type="text" @click="dialogFormVisible2 = true">测试二</el-button>

</div>


<script>
    let app = new Vue({
        el: "#app",
        data: {
            dialogTableVisible1:false,
            dialogTableVisible2:false,
        },
        methods:{

        }
    })



</script>


</body>
</html>

错误原因：两个地方的名称不一致，导致无法显示。