踩踩Element UI的坑

一：嵌套的 Dialog

如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。

二：表格列属性fixed="right"不能用在动态的弹出框中

三：去掉输入框左右两侧空格，可解决输入空格也能校验通过的bug

v-model.trim

四：tooltip宽度太长

image.jpeg

解决方案：tooltip的类是el-tooltip__popper，可以直接写CSS控制宽度

.el-tooltip__popper {
max-width: 400px;
line-height: 1.5;
font-size: 13px;
}

五：页面有数据，dom不刷新解决办法

1.数组改变不刷新原因解析：

对于使原数组变化的方法，可以直接更新视图。

对于原数组未变的方法，可以使用新数组替换原来的数组，以使视图发生变化。

（1）原数组改变

push、 pop 、 unshift、shift、reverse、sort、splice

（2）原数组未变，生成新数组

slice、 concat 、filter

注意：以下不会触发视图的更新。

（1）通过索引直接设置项。

（2）修改数组长度，app.books.length=1。

解决办法：Vue.set(vm.someObject, 'b', 2)

2.表格或者页面不刷新，增加v-if

附上 v-if和 v-show的区别:

使用了v-if的时候，如果值为false，那么页面将不会有这个html标签生成。

v-show则是不管值为true还是false，html元素都会存在，只是CSS中的display显示或隐藏

六：表单model的类型错误，期望是对象，传进去是数组

image.jpeg

七：VUE中el-dialog点击空白不消失

el-dialog中加入:close-on-click-modal="false"可以让点击空白不取消