el-table表格抖动的相关探讨

这个问题主要是element重新渲染的时候重计算了高度所导致的（好像是size不是默认的才会出现的问题？），
在网上看其他伙伴解决动态增减表头导致的闪烁，似乎都是重写表格样式，直接固定cell高度，这样子：

.el-table .cell{
  height:20px!important;
}

但是问题随之出现了，当数据太多需要换行的时候出现了溢出遮挡。。。后面的数据看不见了，所以又给表格加上tooltip-effect属性，可是又感觉好丑T^T（太难了）

仔细想了半天，那能不能等数据加载完、高度计算完再显示表格呢？

啊哈！感觉可行，于是迅速想到我们万能的refs，但是监听$refs这个事情它费时费力也不友好，还不能直接监听它，经尝试，此方案pass。
最后我决定监听一波控制列变化的那个关键的变量，监听加v-if控制表格显示与否，把闪动过程隐藏起来，嗯。。。。。。

一波操作过后，发现真的OK！
赶紧和大家分享一下，先上代码(简单的一个示意，意思到位就行哈，直接copy不太行呢，因为大家控制列变化的方式各不相同，还是要具体问题具体分析~，这里姑且给出两种情况)：

1. 直接用list控制的v-for生成的表格：

<!-- HTML: -->
<!-- changing是关键哈，这里实现的主要原理就在于，
在列变化完成后，也就是列高度计算完才显示表格，
也就是在本来闪那一下的时候我们不让它显示 -->
<el-table
   v-if="changing"
   :data="tableData"
   size="small"
>
     <el-table-column
        v-for="item in showColumn"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
      >
 		 </el-table-column>
</el-table>

//JS：
data() {
 return {
   //通过改变show属性改变展示列
   tableInfo: [
        { prop: 'name', label: '名称', show: true, disabled: true },
        { prop: 'type', label: '类别', show: true, disabled: false },
        { prop: 'size', label: '尺寸', show: true, disabled: false },
      ],
   //从后端获取具体数据
   tableData:[],
   changing: true,
  }
}
computed: {
  // 展示列
  showColumn() {
     return this.tableInfo.filter((item) => item.show);
  },
},
  
//重头戏来了，筒子们：
watch: {
  showColumn() {
    this.changing = false; // 列变化时，表格短暂地处于一个不显示状态
    this.$nextTick(() => { // 列变化完成，表格显示
      this.changing = true;
    });
  },
},

2. 某一项的增减 ( 原理都是一样的哈 )：

<el-table
   v-if="changing"
   :data="tableData"
   size="small"
>
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column
       v-if="columnShow"
       prop="item"
       label="增减列"
     >
 		</el-table-column>
</el-table>

//JS：
data() {
 return {
   //从后端获取具体数据
   tableData:[],
   changing: true,
  }
}
//关键！关键！
watch: {
  columnShow() {
    this.changing = false; // 列变化时，表格短暂地处于一个不显示状态
    this.$nextTick(() => { // 列变化完成，表格显示
      this.changing = true;
    });
  },
},

个人尝试暂时没有什么bug，欢迎小伙伴们一起研究探讨~，如发现问题，欢迎提出指正，感谢大家！