vue2 elementUI el-table固定列和多表头冲突

本文是保存文章，非原创，参考了
https://blog.csdn.net/qq_44848723/article/details/120141381
https://www.jianshu.com/p/3ae89e924b6b
https://www.jianshu.com/p/bffdd1ef538e

本文就只改node_modules中elementui源码，没有去build替换lib

1.修改node_modules/element-ui/packages/table/src/table-layout.js和同级store/helper.js

修改table-layout.js内容

	if (fixedColumns.length > 0) {
      var 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;
    }

在代码下面写方法进行递归

  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;
  }

修改helper.js内容

export function mapStates(mapper) {
  const res = {};
  Object.keys(mapper).forEach(key => {
    const value = mapper[key];
    let fn;
    if (typeof value === 'string') {
      fn = function() {
        // -----------修改部分--------------
        if (value === 'fixedColumns') {
          return this.store.states.columns.filter((column) => {
            return column.fixed;
          });
        }
        // --------------------------
        return this.store.states[value];
      };
    } else if (typeof value === 'function') {
      fn = function() {
        return value.call(this, this.store.states);
      };
    } else {
      console.error('invalid value type');
    }
    if (fn) {
      res[key] = fn;
    }
  });
  return res;
};

2.修改node_modules/element-ui/lib/table.js和同级element-ui.common.js（内容一样）

修改内容 下面三部分在同一个页面，所以就全部列出来，两个js文件相同操作

	if (fixedColumns.length > 0) {
      var 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;
    }

	TableLayout.prototype.computeFixedWidth = function 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;
  };

function mapStates(mapper) {
  var res = {};
  Object.keys(mapper).forEach(function (key) {
    var value = mapper[key];
    var fn = void 0;
    if (typeof value === 'string') {
      fn = function fn() {
        // ------------修改部分--------------
        if (value === 'fixedColumns') {
          return this.store.states.columns.filter((column) => {
            return column.fixed;
          });
        }
        // --------------------------
        return this.store.states[value];
      };
    } else if (typeof value === 'function') {
      fn = function fn() {
        return value.call(this, this.store.states);
      };
    } else {
      console.error('invalid value type');
    }
    if (fn) {
      res[key] = fn;
    }
  });
  return res;
};

样式上面我增加deep，直接写不生效

/deep/ .el-table td.is-hidden > *, .el-table th.is-hidden > * {
  visibility: visible;
}

最后在页面上父级表头和子表头都需要增加fixed

再次强调本文只是一个保存文章内容，防止遗忘