表格同时合并行和列，在网上找了很久都找不到这种方法，于是自己写了一个，适用于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>