el-table多表头列冻结样式有问题

错误原因

eltable多表头冻结时因为eltable源码代码计算有误并不是递归计算所以冻结表格的宽度错误
需要修改源码查询打包替换自己的node_modules

前往git或者gitee下载elementUI最新源码

修改table-layout.js
在其中两百行有这么一段代码

   if (fixedColumns.length > 0) {
      let fixedWidth = 0;
      fixedColumns.forEach(function(column) {
        fixedWidth += column.realWidth || column.width;
      });

      this.fixedWidth = fixedWidth;
    }

这里需要修正
在当前对象中新添加一个方法

  computeFixedWidth(paren, arr) {
    for (let index = 0; index < paren.length; index++) {
      const son = paren[index].children;
      if (!son) {
        arr.push(paren[index]);
      } else {
        this.computeFixedWidth(son, arr);
      }
    }
    return arr;
  }

修改刚刚这行代码


    if (fixedColumns.length > 0) {
      let fixedWidth = 0;
      let arr = [];
      arr = this.computeFixedWidth(fixedColumns, arr);
      for (let index = 0; index < arr.length; index++) {
        if (arr[index].fixed) {
          fixedWidth +=  arr[index].realWidth ||arr[index].width;
        } else {
          break;
        }
      }
      this.fixedWidth = fixedWidth;
      // fixedColumns.forEach(function (column) {
      //   fixedWidth += column.realWidth || column.width;
      // });
      // this.fixedWidth = fixedWidth;
    }

修改后打包

npm run dist

然后把打包后的lib包文件去替换node_modules中Element下的lib文件

你可能感兴趣的:(el-table多表头列冻结样式有问题)