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

bug原因

el-table不能同时达到表头fixed和多表头嵌套的效果，需要修改一下element的源码才能实现

公司的框架中用的饿了么框架版本是2.9.2，贴一个源码下载地址：element源码下载地址，分支的tag里可以切换版本

百度了许多答案，都说只修改table-layout.js就可以实现多表头固定的效果，我试了全部都不生效，不知道是element版本布适配还是其他答案中固定的方法有问题，姑且先贴上两个最靠谱的解决方案： 方案一，方案二 ， 万一解决了呢~~

最后实现的页面：

修改处

首先需要按照上面的两个链接里的方法把源码里计算固定列的地方修改成递归的方式，把children列算进来，这里引用一下另外一位大佬的文章

错误原因
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文件

作者：啊这a
链接：https://www.jianshu.com/p/bffdd1ef538e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

(如果遇到python相关问题参考这篇文章 python2安装问题 )

以上就是修改源码的部分，我试了以后发现不生效，看了看源码，经过调试以后发现this.fixedColumns数量一直是0，通过查找来源，一直跳转到了旁边store文件夹的helper.js里，发现在mapStates这个函数里还需要对fixedColumns做一下处理

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

把代码替换成上面这一段后，多表头的固定问题可以解决了，但是固定列的数据却不显示了，从f12里看，固定的列数据已经渲染出来，但是因为多了一个ishidden的class所以被隐藏了，我没有找到这个ishidden是在哪里加的，如果有哪位比较了解element内部逻辑的大佬可以指点一下，我直接设置了一个全局样式，强制所有隐藏的单元格全显示了，目前没有发现什么问题 反正我做出来了，摆烂了

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

如果不放心的话可以再多研究一下

父级表头和子表头都需要写fixed

此外，node版本过高也会有问题，我用的node版本是v11.4.0，安装一个叫做node version manager的软件可以在不同版本间的node进行切换