vue table表格显示数据加载中_Vue踩坑小记

这篇文章将包括但不限于Vue，也将包括Vue相关的组件库等内容的记载，定期更新本篇文章，如果有没涉及到的坑可以在评论里说明或着私信我，希望集思广益，对大家都有帮助。

1、【IE】【element-ui】组件库中el-table: show-overflow-tooltip 临界值时失效

在IE下，内容长度临界值时 ，出现省略号，但是鼠标hover不显示toolTip。解决方法如下：

.el-table .cell, .el-table th div {
    padding-right: 0;
}

2、【Vue】在data数据对象元素中自定义添加属性如何在界面上数据无响应

这个问题比较比较有意思，有三种方法可以实现响应刷新：

(1) v-if:

这个是我用的比较多的方法。

(2) key:

当需要手动刷新时，修改key即可。

PS：在切换tab时更新所属同一个el-table组件中不同列参数及表格数据时，根据tab切换的同时动态修改el-table的key值，即可避免表格组件样式错位问题。

（3）vm.$forceUpdate()：

注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。迫使vue组件重新渲染，实际上指的是强制重启render函数。即调用该方法后只会触发beforeUpdate、updated这两个生命周期。

3、【IE】【element-ui】组件库中el-form组件当只有一个输入框时按回车键系统会跳转

这是在官网上的一段话，在使用组件的过程中，类似文字基本不会认真看的，也就造成当真正遇到类似问题的时候走了大量的弯路。

4、【Vue】【Element-UI】在切换tab时更新同一el-table组件不同列参数及表格数据时（看2-（2）），列表如果用到Loading（加载）组件的话，加载效果会时灵时不灵

造成上面问题的原因是在切换的同时，el-table组件的key值不断变化，这期间el-table是经历了销毁和重建的，而在此期间调用加载组件由于有时无法指向el-table造成 加载效果时有时无的，解决这个的方法就是在切换tab时，如果调用加载数据的接口的话要通过this.$nextTick()，在数据变化之后等待 Vue 完成更新 DOM，这样回调函数将在 DOM 更新完成后被调用。