Element-UI的dialog弹窗的右上角的叉号和灰曾点击后都不能关闭弹窗

Question

我创建了一个新的vue项目，然后安装了element-ui，启动项目后，在App.vue文件里写入了如下代码：

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog title="提示" :visible="dialogVisible" size="tiny" >
  <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>

运行后效果如下：

后来发现，不管叉号关闭不了，而且就连设置了点击灰层关闭弹窗的属性也无效
我使用的是vue-cli
我的vue依赖包是版本@2.2.6
我的element-ui的依赖包版本是@1.3.3
在QQ群里有人说可能是element-ui版本的问题，后来我试了很多版本依然不行。
对了，还有一个问题，就是我的弹窗在我电脑上可以弹出来，但是在同事的电脑上弹不出来，除非是npm run build后才能在他的电脑上弹出弹窗。
请问：
1、为什么点击叉号和灰层不能关闭弹窗？
2、为什么在我电脑能弹出的弹窗到同事电脑上弹不出来了？
在线等，挺急的。。。

Answer 1

    <el-dialog title="" :visible.sync="dialogTableVisible" :before-close="ai_dialog_close">
        <el-tree
            :data="gridData"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree"
            :default-checked-keys="defaulttreevalue"
            highlight-current
            :props="defaultProps">
        </el-tree>
    </el-dialog>
    ===================
    ai_dialog_close(){
            this.dialogTableVisible = false;
        },
        
    ==============================

还有查看下版本，之前1.2.9版本，死活不显示弹窗。更新1.3.1版本后就显示了

Answer 2

你少了异步的这个

:visible.sync="dialogVisible"

Answer 3

上面说的不全面，是我这边出现是因为冒泡的原因。
提到冒泡的，懂得自然懂。

Answer 4

我也遇到了同样的问题，确实是事件冒泡了

Answer 5

我的也是一样，关键还是有些页面的可以，有些不行。弹窗代码都差不多。

Answer 6

难受,楼主这问题是怎么解决的