关于element-ui:浪迹天涯king教你用elementui做复杂的表格去处理报表数据合并表头合并表体行和列

掘金链接（掘金 - 简单的报表开发（elementui））

1、不必多说了，先上图片

2、性能个性

1. 表头的背景色，题目的虚线边框
2. 表头的个别单元格款式
3. 表头合并行性能
4. 简单的动静表头性能
5. 表体渲染下标从第 n 行开始
6. 表体第一行，第二行的 1,2,3 列合并
7. 表体第一行，第二行的，“达成”，“环比”，“排名”合并
8. 表体的个别单元格款式

3、代码（间接复制粘贴看成果）

<template>
    <div class="changeElBoCoSt kingChangeHead">
        <el-table
            :data="tableData"
            style="width: 100%"
            :span-method="objectSpanMethod"
            :row-class-name="rowClassName"
            :cell-class-name="cellClassNameKing"
            :header-cell-class-name="headerCellClassNameKing"
            :header-cell-style="headerCellStyleNameKing"
        >
            <el-table-column label="7 月 - 罗湖东子公司各项品质达成汇总" align="center">
                <el-table-column :index="kingIndex" type="index" label="序号" align="center"></el-table-column>
                <el-table-column label="类型" width="120" align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.$index == 0" style="font-weight: bold;">
                            各区排名
                            <span style="color: blue;"> 第一 </span>
                            我的项目个数
                        </span>
                        <span v-else>{{scope.row.type}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="project" label="我的项目" width="120" align="center"></el-table-column>
                <el-table-column v-for="(value1, key, index) in tableData[0]['daySale']" :key="index +'day'":label="key"align="center">
                    <el-table-column v-for="(value2, key2, index2) in value1" :key="index2" :label="key2" align="center">
                        <el-table-column v-for="(item1, index1) in value2" :key="index1" :label="item1.name" align="center">
                            <template slot-scope="scope">
                                <span :style="{
                                                            color:
                                                                scope.row.daySale[key][key2][index1]['isColor'] == 1
                                                                    ? 'blue'
                                                                    : scope.row.daySale[key][key2][index1]['isColor'] == 2
                                                                    ? 'red'
                                                                    : '',
                                                            fontWeight:
                                                                scope.row.daySale[key][key2][index1]['isColor'] == 1 || scope.row.daySale[key][key2][index1]['isColor'] == 2 ? 'bold' : ''}">{{scope.row.daySale[key][key2][index1]['value'] }}</span>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {data() {
        return {
            tableData: [
                {
                    type: '各区排名第一我的项目个数',
                    project: '各区排名第一我的项目个数',
                    daySale: {
                        '7 月': {
                            整体: [
                                {
                                    name: '整体',
                                    value: 0.32,
                                    isColor:null,
                                }
                            ],
                            宝安: [
                                {
                                    name: '达成',
                                    value: 0.33,
                                    isColor:null,
                                },
                                {
                                    name: '环比',
                                    value: 0.33,
                                    isColor:null,
                                },
                                {
                                    name: '排名',
                                    value: 0.33,
                                    isColor:null,
                                }
                            ],
                            龙岗: [
                                {
                                    name: '达成',
                                    value: 0.331,
                                    isColor:null,
                                },
                                {
                                    name: '环比',
                                    value: 0.341,
                                    isColor:null,
                                },
                                {
                                    name: '排名',
                                    value: 0.351,
                                    isColor:null,
                                }
                            ]
                        },
                        '第一周（7 月 1 日 - 6 日）': {
                            整体: [
                                {
                                    name: '整体',
                                    value: 0.322,
                                    isColor:null,
                                }
                            ],
                            宝安: [
                                {
                                    name: '达成',
                                    value: 0.332,
                                    isColor:null,
                                },
                                {
                                    name: '环比',
                                    value: 0.342,
                                    isColor:null,
                                },
                                {
                                    name: '排名',
                                    value: 0.352,
                                    isColor:null,
                                }
                            ],
                            龙岗: [
                                {
                                    name: '达成',
                                    value: 0.332,
                                    isColor:null,
                                },
                                {
                                    name: '环比',
                                    value: 0.342,
                                    isColor:null,
                                },
                                {
                                    name: '排名',
                                    value: 0.352,
                                    isColor:null,
                                }
                            ]
                        }
                    }
                },
                {
                    type: '各区排名最初我的项目个数',
                    project: '各区排名最初我的项目个数',
                    daySale: {
                        '7 月': {
                            整体: [
                                {
                                    name: '整体',
                                    value: 0.32,
                                    isColor:1,
                                }
                            ],
                            宝安: [
                                {
                                    name: '达成',
                                    value: 0.33,
                                    isColor:null,
                                },
                                {
                                    name: '环比',
                                    value: 0.34,
                                    isColor:2,
                                },
                                {
                                    name: '排名',
                                    value: 0.35,
                                    isColor:null,
                                }
                            ],
                            龙岗: [
                                {
                                    name: '达成',
                                    value: 0.331,
                                    isColor:null,
                                },
                                {
                                    name: '环比',
                                    value: 0.341,
                                    isColor:null,
                                },
                                {
                                    name: '排名',
                                    value: 0.351,
                                    isColor:null,
                                }
                            ]
                        },
                        '第一周（7 月 1 日 - 6 日）': {
                            整体: [
                                {
                                    name: '整体',
                                    value: 0.322,
                                    isColor:null,
                                }
                            ],
                            宝安: [
                                {
                                    name: '达成',
                                    value: 0.332,
                                    isColor:null,
                                },
                                {
                                    name: '环比',
                                    value: 0.342,
                                    isColor:null,
                                },
                                {
                                    name: '排名',
                                    value: 0.352,
                                    isColor:null,
                                }
                            ],
                            龙岗: [
                                {
                                    name: '达成',
                                    value: 0.332,
                                    isColor:null,
                                },
                                {
                                    name: '环比',
                                    value: 0.342,
                                    isColor:null,
                                },
                                {
                                    name: '排名',
                                    value: 0.352,
                                    isColor:null,
                                }
                            ]
                        }
                    }
                },
                {
                    type: '收件 1',
                    project: '收件滞留率 1',
                    daySale: {
                        '7 月': {
                            整体: [
                                {
                                    name: '整体',
                                    value: 0.328,
                                    isColor:null,
                                }
                            ],
                            宝安: [
                                {
                                    name: '达成',
                                    value: 0.338,
                                    isColor:null,
                                },
                                {
                                    name: '环比',
                                    value: 0.348,
                                    isColor:null,
                                },
                                {
                                    name: '排名',
                                    value: 0.358,
                                    isColor:null,
                                }
                            ],
                            龙岗: [
                                {
                                    name: '达成',
                                    value: 0.3318,
                                    isColor:null,
                                },
                                {
                                    name: '环比',
                                    value: 0.3418,
                                    isColor:null,
                                },
                                {
                                    name: '排名',
                                    value: 0.3518,
                                    isColor:null,
                                }
                            ]
                        },
                        '第一周（7 月 1 日 - 6 日）': {
                            整体: [
                                {
                                    name: '整体',
                                    value: 0.3229,
                                    isColor:null,
                                }
                            ],
                            宝安: [
                                {
                                    name: '达成',
                                    value: 0.3329,
                                    isColor:null,
                                },
                                {
                                    name: '环比',
                                    value: 0.3429,
                                    isColor:null,
                                },
                                {
                                    name: '排名',
                                    value: 0.3529,
                                    isColor:null,
                                }
                            ],
                            龙岗: [
                                {
                                    name: '达成',
                                    value: 0.3329,
                                    isColor:null,
                                },
                                {
                                    name: '环比',
                                    value: 0.3429,
                                    isColor:null,
                                },
                                {
                                    name: '排名',
                                    value: 0.3529,
                                    isColor:null,
                                }
                            ]
                        }
                    }
                }
            ],
            selectData: [],

            // 统计合并多少行
            needMergeArr: ['type'], // 有合并项的列
            rowMergeArrs: {} // 蕴含须要一个或多个合并项信息的对象};
    },
    mounted() {this.getList();
    },

    updated() {this.$nextTick(() => {if (this.$refs.mutipleTable !== undefined) {this.$refs.mutipleTable.doLayout();
            }
        });
    },
    methods: {
        /**
         * @description 实现合并行或列
         * @param row:Object 须要合并的列 name 如:'name' 'id'
         * @param column:Object 以后行的行数，由合并函数传入
         * @param rowIndex:Number 当前列的数据，由合并函数传入
         * @param columnIndex:Number 当前列的数据，由合并函数传入
         *
         * @return 函数能够返回一个蕴含两个元素的数组，第一个元素代表 rowspan，* 第二个元素代表 colspan。也能够返回一个键名为 rowspan 和 colspan 的对象
         */
        objectSpanMethod({row, column, rowIndex, columnIndex}) {
            // 第一行的达成，环比，排名，列合并
            if (rowIndex === 0) {if (column.label == '达成') {return [1, 3];
                } else if (column.label == '环比') {return [0, 0];
                } else if (column.label == '排名') {return [0, 0];
                }
            }
            // 第一，第二行的 1,2,3 列合并
            if (rowIndex === 0 || rowIndex === 1) {if (columnIndex === 0) {return [0, 0];
                } else if (columnIndex === 1) {return [1, 3];
                } else if (columnIndex === 2) {return [0, 0];
                }
            }
            // 办法二:（合并行）for (let key in this.rowMergeArrs) {if (column.property == key) {let _row = this.rowMergeArrs[key].rowArr[rowIndex];
                    let _col = _row > 0 ? 1 : 0;
                    return [_row, _col];
                }
            }
        },
        // 用来合并表头的（label 为“整体”的高低两行合并）headerCellStyleNameKing({row, column, rowIndex, columnIndex}) {if(rowIndex === 0){this.$nextTick(() => {if ($('.'+column.id).length !== 0) {$('.'+column.id+'.cell').css({'color':'#111','font-weight': 'bold'}); 
                    }
                });
                return column;
            }
            else if (rowIndex === 2) {if (column.label == '整体') {this.$nextTick(() => {if ($('.'+column.id).length !== 0) {$('.'+column.id+'.cell').css({'color':'#111','font-weight': 'bold'});
                            $('.'+column.id).attr('rowspan', 2);
                            // var _c = document.getElementsByClassName(column.id);
                            // document.getElementsByClassName(column.id)[0].setAttribute('rowSpan', 2);
                        }
                    });
                    return column;
                }
            } else if (rowIndex === 3) {if (column.label == '整体') {return { display: 'none'};
                }
            }
        },
        // 解决下标从第二行开始，（数字要从 1 开始）kingIndex(index) {if (index != 0 || index != 1) {return index - 1;}
        },
        // 解决表头的双下划线
        headerCellClassNameKing({row, column, rowIndex, columnIndex}) {if (columnIndex == 6) {return 'kingRowIndex1';}
        },
        cellClassNameKing({row, column, rowIndex, columnIndex}) {if (columnIndex == 6) {return 'kingRowIndex1';}
        },
        // 给行增加类名 (用于单元格的下划线问题)
        rowClassName({row, rowIndex}) {if (rowIndex == this.kingRowIndex - 1) {return 'kingRowIndex';}
        },
        getList() {
            // 实线加粗
            this.kingRowIndex = 1;
            // 解决数据
            this.rowMergeArrs = this.rowMergeHandle(this.needMergeArr, this.tableData);
        }
    }
};
</script>
<style lang="scss">
.changeElBoCoSt {
    .el-table__header {
        // border-right: 1px solid #000;
        border-top: 1px solid #000;
        border-left: 1px solid #000;
    }
    .el-table__body {
        // border-right: 1px solid #000;
        // border-bottom: 1px solid #000;
        border-left: 1px dashed #000;
    }

    .el-table--border td {border-right: 1px dashed #000;}
    .el-table--border th {border-right: 1px solid #000;}
    .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {border-right: 1px dashed #000;}

    .el-table--border th {border-bottom: 1px solid #000;}

    .el-table__fixed-right-patch {border-bottom: 1px dashed #000;}

    .el-table td {border-bottom: 1px dashed #000;}
    .el-table th.is-leaf {border-bottom: 1px solid #000;}

    .el-table__header tr,
    .el-table__header th {background-color: #ffc000 !important;}
    // // body 的每一行的最初一个单元格
    // .el-table__body tr td:last-child {
    //     border-right: 1px solid #000;
    // }
    // // body 的最初一行
    // .el-table__body tr:last-child td {
    //     border-bottom: 1px solid #000;
    // }
    // //（刚好最初两行的第一列有合并才要这个）// .el-table__body tr:first-child td:first-child {
    //     border-bottom: 1px solid #000;
    // }

    // 双下划线（表体）// .kingRowIndex td {
    //     border-bottom: 2px solid #000000 !important;
    // }
    // 表头
    // .kingRowIndex1 {
    //      border-right: 2px solid #000000 !important;
    // }
}
</style>