本文是保存文章,非原创,参考了
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