关于前端:表格同时合并行和列在网上找了很久都找不到这种方法于是自己写了一个适用于elementui

需要：同时合并表格的行和列？

自己在百度下面找了很久，貌似没有找到相干的合并办法，唯有本人写了一个，逻辑简略，很蠢笨，欢送大神来改良

<template>
    <div class="">
        <el-table ref="mutipleTable" border highlight-current-row :height="400" resizable :data="tableData" :span-method="objectSpanMethod">
            <el-table-column label="序号" type="index" width="60"></el-table-column>
            <el-table-column
                v-for="(item, index) in tableLabel"
                :key="index"
                :prop="item.prop"
                :sortable="item.sortable"
                :width="item.width"
                :label="item.label"
                :show-overflow-tooltip="item.showOverTooltip"
            >
                <template slot-scope="scope">
                    <span>{{scope.row[scope.column.property] }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
 
<script>
export default {
    name: '',
    data() {
        return {kingObj1: {},
            kingObj: {},
            tableData: [],
            // 表头的数据
            tableLabel: [{ label: '负责人', width: '122', prop: 'name1', showOverTooltip: true, sortable: false, sortNo: 1},
                {label: '预计指标', width: '122', prop: 'name2', showOverTooltip: true, sortable: false, sortNo: 3},
                {label: '理论指标', width: '122', prop: 'name3', showOverTooltip: true, sortable: false, sortNo: 4},
                {label: '累计达成率', width: '122', prop: 'name4', showOverTooltip: true, sortable: false, sortNo: 5},
                {label: '工夫进度', width: '122', prop: 'name5', showOverTooltip: true, sortable: false, sortNo: 6}
            ]
        };
    },
    mounted() {this.getList();
    },
    updated() {this.$nextTick(() => {this.$refs.mutipleTable.doLayout();
        });
    },
    methods: {getList() {
            let list = {
                detailList: [
                    {
                        name1: '客户 1',
                        name2: '客户 1',
                        name3: '客户 3',
                        name4: '客户 4',
                        name5: '客户 5'
                    },
                    {
                        name1: '客户 1',
                        name2: '客户 1',
                        name3: '客户 3',
                        name4: '客户 4',
                        name5: '客户 5'
                    },
                    {
                        name1: '客户 1',
                        name2: '客户 2',
                        name3: '客户 3',
                        name4: '客户 5',
                        name5: '客户 5'
                    },
                    {
                        name1: '客户 1',
                        name2: '客户 2',
                        name3: '客户 3',
                        name4: '客户 4',
                        name5: '客户 5'
                    },
                    {
                        name1: '客户 1',
                        name2: '客户 2',
                        name3: '客户 3',
                        name4: '客户 4',
                        name5: '客户 5'
                    }
                ],
                total: {
                    name1: '共计',
                    name2: '共计',
                    name3: '客户 3',
                    name4: '客户 4',
                    name5: '客户 5'
                }
            };
            let kingObj = {};
            let kingObj1 = {};
            list.detailList.forEach((item, index) => {
                /* 
                * param:1 和 2 是代表存在和不存在，这个能够自定义，用下合并的时候，判断 1 所在的行数须要合并，2 所在的行数不须要合并
                */
                if (item.name1 == item.name2) {if (!kingObj[item.name1]) {kingObj[item.name1] = {};
                        kingObj[item.name1][item.name1 + '1'] = [];
                        kingObj[item.name1][item.name1 + '2'] = [];
                        kingObj[item.name1][item.name1 + '1'].push(index);
                    } else {kingObj[item.name1][item.name1 + '2'].push(index);
                    }
                }
                if (item.name4 == item.name5) {if (!kingObj1[item.name4]) {kingObj1[item.name4] = {};
                        kingObj1[item.name4][item.name4 + '1'] = [];
                        kingObj1[item.name4][item.name4 + '2'] = [];
                        kingObj1[item.name4][item.name4 + '1'].push(index);
                    } else {kingObj1[item.name4][item.name4 + '2'].push(index);
                    }
                }
            });
            this.kingObj = kingObj;
            this.kingObj1 = kingObj1;
            list.detailList.push(list.total);
            this.tableData = list.detailList;
        },
        objectSpanMethod({row, column, rowIndex, columnIndex}) {for (let key in this.kingObj) {
                // 如果 rowIndex 在须要合并的行中
                if (this.kingObj[key][key + '1'].includes(rowIndex)) {
                    /*
                    *param:this.kingObj[key][key + '1']['length'] + this.kingObj[key][key + '2']['length'] 代表总共合并的行数
                    */
                    if (columnIndex === 1) {return [this.kingObj[key][key + '1']['length'] + this.kingObj[key][key + '2']['length'], 2];
                    } else if (columnIndex === 2) {return [0, 0];
                    }
                } else if (this.kingObj[key][key + '2'].includes(rowIndex)) {if (columnIndex === 1) {return [0, 0];
                    } else if (columnIndex === 2) {return [0, 0];
                    }
                }
            }
            for (let key in this.kingObj1) {
                // 如果 rowIndex 在须要合并的行中
                if (this.kingObj1[key][key + '1'].includes(rowIndex)) {if (columnIndex === 4) {return [this.kingObj1[key][key + '1']['length'] + this.kingObj1[key][key + '2']['length'], 2];
                    } else if (columnIndex === 5) {return [0, 0];
                    }
                } else if (this.kingObj1[key][key + '2'].includes(rowIndex)) {if (columnIndex === 4) {return [0, 0];
                    } else if (columnIndex === 5) {return [0, 0];
                    }
                }
            }
        }
    }
};
</script>
 
<style></style>