el-table的fixed属性导致表格错位的问题（已解决）

在引入element UI 的table组件使用过程中，业务需求要实现某列的固定，类似于excel的冻结窗口功能。

这里官方提供的方式是 给 el-table的<el-table-column> 添加 fixed属性，添加后，该列不会随着横向滚动而滚动。

如图所示，浅蓝色应该是对齐的。

发生错位的原因，是由于table在数据请求后，渲染异常的问题；因此，解决办法就是让table重新布局。

这里官方提供了doLayout方法，来解决重新布局的问题

doLayout的使用方式

找到请求数据的地方，立刻获取更新后的DOM

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

        // el-table加ref="multipleTable"
      });

例如

我在数据请求并赋值，再进行了合并单元格操作后，加入了更新dom的操作。

  getSpanArr(data) {
      this.tableData1 = data;
      var obj1 = {},
        k1,
        arr1 = [];
      for (var i = 0, len = this.tableData1.length; i < len; i++) {
        k1 = this.tableData1[i].catalogmodelCode; //判断的字段
        if (obj1[k1]) {
          obj1[k1]++;
        } else {
          obj1[k1] = 1;
        }
      }
      //保存结果{el-'元素'，count-出现次数}
      for (var o in obj1) {
        for (let i = 0; i < obj1[o]; i++) {
          if (i === 0) {
            this.spanArr.push(obj1[o]);
          } else {
            this.spanArr.push(0);
          }
        }
      }
      this.$nextTick(() => {
        this.$refs.multipleTable.doLayout();

        // table加ref="multipleTable"
      });
    },

template里面el-table增加 ref属性

<el-table
        :data="tableData1"
  		ref="multipleTable"
      >
</el-table>

看结果