现象描述
页面渲染出表格以及表格中的所有内容,当触发表格中的自定义点击事件或者切换tab页时,表格里面的单元格和内容行就会发生左右或者上下抖动
问题寻源
由于表格中的 el-table 没有采用固定列宽,而是采用动态计算的列宽,并且有 v-if 或 v-show 来控制表格某一列的展示与隐藏,所以切换tab或者触发点击事件时使表格会被重新加载计算,从而出现抖动的现象
解决方法
1.在table所在的dom更新后立刻对el-table进行重新布局(也就是调用el-table的doLayout方法),例如在beforeUpdated生命周期中调用doLayout:
// 解决打开弹窗 el-table 抖动问题
beforeUpdate() {
this.$nextTick(() => {
this.$refs.multipleTable.doLayout()
})
},
2.在有v-if或者v-show控制的el-table-column中绑定唯一的key值
// 目的的生成一个唯一的key值,随机的
:key="Math.random()"
这样俩个步骤就能把问题解决啦!