解决elementUIel-table固定列和多表头冲突问题
bug原因
el-table不能同时达到表头fixed和多表头嵌套的效果，需要修改⼀下element的源码才能实现
公司的框架中⽤的饿了么框架版本是2.9.2，贴⼀个源码下载地址：，分⽀的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 += alWidth || 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]);
}el{
}
}
return arr;
}
修改刚刚这⾏代码
if(fixedColumns.length >0){
let fixedWidth =0;
let arr =[];
arr =puteFixedWidth(fixedColumns, arr);
for(let index =0; index < arr.length; index++){
if(arr[index].fixed){
fixedWidth += arr[index].realWidth ||arr[index].width;
}el{
break;
猫能吃黄瓜吗}
}
this.fixedWidth = fixedWidth;
// fixedColumns.forEach(function (column) {
// fixedWidth += alWidth || column.width;
美国移民新政策// });
/
/ this.fixedWidth = fixedWidth;
}
npm run dist
然后把打包后的lib包⽂件去替换node_modules中Element下的lib⽂件
以上就是修改源码的部分，我试了以后发现不⽣效，看了看源码，在table.vue的mount⾥打了个debug，发现this.fixedColumns数量⼀直是0，通过Ctrl/Command+左键（webstorm）查找来源，⼀直跳转到了了旁边store⽂件夹的helper.js⾥，发现mapStates这个函数⾥还需要对fixedColumns做⼀下处理
export function mapStates(mapper){
const res ={};
Object.keys(mapper).forEach(key =>{
const value = mapper[key];
捕鼠方法
let fn;q版萌图
if(typeof value ==='string'){
fn=function(){
重阳节教案if(value ==='fixedColumns'){
return this.lumns.filter((column)=>{
return column.fixed;
});
}
return this.store.states[value];
};
}el if(typeof value ==='function'){
fn=function(){
return value.call(this,this.store.states);
};
}el{
<('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;
}
happiness如果不放⼼的话可以再多研究⼀下，我暂时没时间看源码了
后⾯发现如果⽗级和⼦级的表头都设置了fixed，同样会产⽣⼦级列固定，不显⽰数据的效果，但是没有测试套⽤最后修改的class会不会⽣效，如果试了上⾯的代码还是不⾏的话就再试⼀下这个吧
