多级表头固定列
代码示例-不能直接运行，仅供参考
<el-table ref="table" class="table"
:data="list"
style="width: 100%"
:header-cell-style="headerCellStyle"
v-loading="dataLoading"
:span-method="spanMethod"
>
<el-table-column v-for="(item, index) in tableHeader"
:label="item.name" :key="index"
:fixed="item.fixed"
:min-width="item.width">
<el-table-column v-for="(head,j) in item.header"
:label="head.label" :key="j+'ii'"
:fixed="head.fixed"
:prop="head.id"
:min-width="head.minW"
:class-name="setClass(head.id)">
</el-table-column>
</el-table-column>
</el-table>
需要在修改样式-避免固定列数据空白情况
<style lang="less" scoped>
.table {
/deep/.el-table__cell.is-hidden>*{//多级表头固定列-样式修改
visibility: visible;
}
}
</style>合并单元格
如图，下列方法实现的是图中的合并单元格的方式方法
function spanMethod({ row, column, rowIndex, columnIndex }) {
let arr = [0, 1, 2, 4, 12, 13, 14, 15, 16, 17,18,19,20,21];//需要合并的列
let spArr = [5, 22, 23, 24, 25, 26, 27];//需要合并的列
if (arr.indexOf(columnIndex)>-1) {
if (row.rowspan) {
return {
rowspan: row.rowspan,//合并多少行数据
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}else if (spArr.indexOf(columnIndex) > -1) {
if (row.spRowspan) {
return {
rowspan: row.spRowspan,
colspan: 1
};
} else {
if (!row.mcId) {//避免不合并的行，缺少数据，导致没有边框
return {
rowspan: 1,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
}
},