element-ui el-table 数据变化时表格出现抖动_el-table抖动

element-ui el-table 数据变化时表格出现抖动

项目有个需求，有一个表格是通过改造el-table来适应需求，表格的head和body数据都是通过v-for渲染遍历生成的，通过多选框Checkbox来勾选表格头部需要展示的数据，进行切换到时候表格出现抖动不美观。
部分原代码：

<el-table :data="tableData" border class="spec-table">
     <el-table-column v-for="(item,index) in tableTh" :key="index" :prop="item.txt" :label="item.label" width="120">
              <template slot-scope="scope">
                <div v-if="tableTh[index].txt=='skuImg'">
                  ......
                </div>
               </template>
      </el-table-column>
</el-table>
1
2
3
4
5
6
7
8
9

效果图

出现抖动原因：
1，审查元素el-table__head，el-table__body 的 width 不停被设置导致表格抖动,当未设定列表宽时，element有做自动检测适应。这造成了一种情况，即上下滚动条的出现时，触发宽度，使得上下滚动条消失，再次触发宽度变换，然后如此循环。
2，页面出现重绘.
3，v-for的key属性渲染不对

解决：
1，表格数据的v-for中的key使用随机数:key=“Math.random()”；使用随机数可能会出现坑，慎用。有的使用随机数不出现抖动，有的使用正确的值不出现抖动。

2，检查布局中的：overflow: auto， 避免flexbox 子元素设置这个属性.
给el-table__head，.el-table__body添加 width: 99.9%!important; 属性，强制宽度。

.el-table{
       width:99.9%!important;//不让它到临界值，这样可避免自动计算
}
1
2
3

 /deep/ .el-table__header , /deep/ .el-table__body{
      overflow: hidden;
      width: 99.9%!important;
    }
1
2
3
4

3，再者可以设置elementui表格的容器的高度=table容器高度 / 行数

//重写表格样式，不在自动计算，解决表格渲染时闪烁问题，设置table容器高度/行数
.el-table .cell{
  height:20px!important;
}

1
2
3
4
5

如果切换表格的数据时表格是向下而上的抖动，可以使用element 表格中的dolayout函数解决：对 Table 进行重新布局，当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法。

    this.$nextTick(() => { //在数据加载完，重新渲染表格
    		this.$refs['table'].doLayout();
    })
1
2
3