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

最新推荐文章于 2024-09-04 11:10:15 发布

m0_74244441

最新推荐文章于 2024-09-04 11:10:15 发布

阅读量1.8k

点赞数 3

文章标签： ui vue.js elementui

原文链接：https://blog.csdn.net/cc6_66/article/details/124293008

版权

文章讲述了在ElementUI的el-table组件中，由于数据变化导致表格抖动的原因，包括宽度自动调整、页面重绘和v-forkey的使用不当。提出了几种解决方案，如使用随机数作为key、调整布局宽度、避免overflow属性和利用doLayout方法进行表格重新布局。

摘要由CSDN通过智能技术生成

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，审查元素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;//不让它到临界值，这样可避免自动计算
}
 /deep/ .el-table__header , /deep/ .el-table__body{
      overflow: hidden;
      width: 99.9%!important;
    }
3，再者可以设置elementui表格的容器的高度=table容器高度 / 行数 
//重写表格样式，不在自动计算，解决表格渲染时闪烁问题，设置table容器高度/行数
.el-table .cell{
  height:20px!important;
}
如果切换表格的数据时表格是向下而上的抖动，可以使用element 表格中的dolayout函数解决：对 Table 进行重新布局，当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法。 
    this.$nextTick(() => { //在数据加载完，重新渲染表格
    		this.$refs['table'].doLayout();
    })