element：el-table 表格高度错位

一、背景

需求需要弄一个带有显示列功能的固定表头的表格，以便动态显示表格的表头。

二、操作步骤

1. 在显示列里面操作将全部表头隐藏；
2. 再次将表头取消隐藏时，出现表格错位。（如图）

三、实际结果

（如图）

四、预期结果

操作后，表格需要显示正确

五、修复方式

分析：
表格固定了高度，当通过显示列的功能手动改变了table表头的显隐，此操作会使dom元素更改，浏览器还没来得及重新计算，表格就已经渲染出来了。导致表格渲染错误。

解决方法：

1. 通过watch来监听tableColumn有无改变（即有无被隐藏或显示）
2. 使用await this.$nextTick()，目的是等dom更新
3. 再调用element给出的doLayout()方法来重新布局table，使之按原来的样子显示出来。
   

解决代码：

  watch:{
    // 表格渲染错位以及高度计算错误调整
    async tableColumn(newV, oldV) {
      if (!oldV.length) {      // 此判断逻辑需要根据自身业务去调整
        await this.$nextTick();
        this.$refs.deviationSummaryTable.doLayout()
      }
    }
  },

主要代码：

this.$nextTick(() => {
  this.$refs.table.doLayout();
});