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

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

这里官方提供的方式是 给 el-table的 添加 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属性



看结果

你可能感兴趣的:(#,vue.js,Element_UI,vue.js,javascript,node.js)