vue2 table表头显示隐藏造成表头必选不显示切换高度闪烁

前言：根据业务需求使用了表单嵌套table实现tabel内带输入框和下拉,日期等等，然后进行必填字段的展示，由于使用下拉控制表格的显示以及表头字段的展示出现表格高度闪烁以及必填的展示字段错误

需要实现的效果

1.表头展示必选字段的解决

 在 el-table-column 上需根据不同 v-if 条件来控制列显隐时，就会出现列数据展示错乱的情况

解决方法

在每个需要使用 v-if 或 v-else 的 el-table-column 上增加 key 作为唯一标识，这样渲染的时候就不会因为复用原则导致列数据混乱了。关于key值，一般习惯使用字段名，也可随机生成一个值，只要具有唯一性就可以。

如果还是有没显示了，记得给他们想必填的字段换个位置说不定就好了哟！

<el-table-column
       v-if="mfylvisibly"
       :key="Math.random()" //唯一性
       prop="mfyl"
       label="密封腔压力（MPaG）"
       width="170"
       :render-header="renderHeader"
>
 <template slot-scope="scope">
    <el-form-item
       :prop="'tableData[' + scope.$index + '].mfyl'"
        :rules="contract.rules.mfyl"
    >
      <el-input
        :maxlength="999"
         v-model="scope.row.mfyl"
      ></el-input>
  </el-form-item>
 </template>
</el-table-column>

2.表格高度闪烁往下掉

原因推断：

当新增一列时，表头先是变高然后迅速复原；
当减少一列时，表头先是空出了提出那一列的位置，然后迅速将空出来的空间重新分配给剩余的两列；
通过这么一粗浅的分析，我们可以很容易的看出：无论是新增列还是删除列，vue 都需要重新计算单元格的高度和宽度，然后再重新渲染到页面上。因为这个过程被直接反馈到了页面上，所以导致了 table 发生闪烁。

很显然，只要我们把这个过程隐藏，就可以解决闪烁问题。

解决方法

使用 element 提供的 doLayout 方法

//在数据加载完，重新渲染表格
this.$nextTick(() => {
   this.$refs.tableName.doLayout();
   // el-table添加ref="tableName"
});