element-ui表格多级表头固定列和合并单元格

多级表头固定列

代码示例-不能直接运行，仅供参考

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