抖动可能原因:
- element有做自动检测适应。
- 页面出现重绘。
- v-for的key属性渲染不对。
百度提供的解决方案有:
- v-show改成v-if。由于本需求的所有tab下的表格均需要显示,所以不能使用v-if使它卸载调,此路不通。
- el-table-column添加
:key="Math.random()"
,先不说无效吧,产生的随机值也是有重复的可能的,绝对大坑,弃用。 - 给 key 绑定确定的值,例如 :key=“1”,:key=“2”。无效。
最终解决方案:
使用element 表格中的doLayout
方法,对 Table 进行重新布局。
- 给el-table设置ref
<el-tabs v-model="activeName" @tab-click="handleTabClick">
<el-tab-pane v-for="(item, i) in metadata" :key="i" :label="`${item.tableName}`" :name="`multipleTable${i}`">
<el-table row-key="id" :key="i" :data="item.tableColumns" :ref="`multipleTable${i}`" style="width: 100%">
</el-table>
</el-tab-pane>
</el-tabs>
- 切换tab时使用doLayout()方法
/**
* tab切换
*/
handleTabClick(tab) {
const refName = `multipleTable${tab.index || 0}`
this.$nextTick(() => {
if (this.$refs[refName] && this.$refs[refName][0]) {
this.$refs[refName][0].doLayout()
}
})
},