【vex-table】 复杂表格 同时存在合并列 与 合并行

https://xuliangzhan_admin.gitee.io/vxe-table/#/table/advanced/popupEdit  //vxe官方文档

<template>
    <div class="about">
        <vxe-table
            border
            resizable
            height="800"
            :scroll-y="{ enabled: false }"
            :span-method="mergeRowMethod"
            :data="tableData3"
        >
            <vxe-table-colgroup title="基本信息">
                <vxe-table-column
                    field="key"
                    title="Key"
                    width="60"
                ></vxe-table-column>
                <vxe-table-column
                    field="name"
                    title="姓名"
                    width="60"
                ></vxe-table-column>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="基本信息1">
                <vxe-table-column field="v1" title="项1"></vxe-table-column>
                <vxe-table-column field="v2" title="项2"></vxe-table-column>
                <vxe-table-column field="v3" title="项3"></vxe-table-column>
                <vxe-table-column field="v4" title="项4"></vxe-table-column>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="基本信息2">
                <vxe-table-column field="v5" title="项5"></vxe-table-column>
                <vxe-table-column field="v6" title="项6"></vxe-table-column>
                <vxe-table-column field="v7" title="项7"></vxe-table-column>
                <vxe-table-column field="v8" title="项8"></vxe-table-column>
            </vxe-table-colgroup>
            <vxe-table-column title="操作" width="100">
                <template #default="{ row }">
                    <vxe-button
                        type="text"
                        icon="fa fa-edit"
                        @click="editEvent(row)"
                        >编辑</vxe-button
                    >
                </template>
            </vxe-table-column>
        </vxe-table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData3: [
                {
                    id: 10001,
                    key: "行政人员",
                    name: "1",
                    v1: "v1",
                    v2: "v2",
                    v3: "v3",
                    v4: "v4",
                    v5: "v5",
                    v6: "v6",
                    v7: "v7",
                    v8: "v8",
                },
                {
                    id: 10002,
                    key: "行政人员",
                    content: "小虎",

                    name: "1",
                    v1: "v1",
                    v2: "v2",
                    v3: "v3",
                    v4: "v4",
                    v5: "v5",
                    v6: "v6",
                    v7: "v7",
                    v8: "v8",
                },
                {
                    id: 10003,
                    key: "行政人员",
                    content: "Name",

                    name: "1",
                    v1: "v1",
                    v2: "v2",
                    v3: "v3",
                    v4: "v4",
                    v5: "v5",
                    v6: "v6",
                    v7: "v7",
                    v8: "v8",
                },

                {
                    id: 10006,
                    key: "中层领导",
                    name: "1",
                    v1: "v1",
                    v2: "v2",
                    v3: "v3",
                    v4: "v4",
                    v5: "v5",
                    v6: "v6",
                    v7: "v7",
                    v8: "v8",
                },
                {
                    id: 10007,
                    key: "中层领导",
                    content: "小虎",

                    name: "1",
                    v1: "v1",
                    v2: "v2",
                    v3: "v3",
                    v4: "v4",
                    v5: "v5",
                    v6: "v6",
                    v7: "v7",
                    v8: "v8",
                },
                {
                    id: 10008,
                    key: "中层领导",
                    content: "Name",

                    name: "1",
                    v1: "v1",
                    v2: "v2",
                    v3: "v3",
                    v4: "v4",
                    v5: "v5",
                    v6: "v6",
                    v7: "v7",
                    v8: "v8",
                },
            ],
        };
    },
    methods: {
        // 通用行合并函数（将相同多列数据合并为一行） 其实就是要有相同key:value的属性值进行绑定
        mergeRowMethod({ row, _rowIndex, column, visibleData }) {
            const fields = ["key"];
            const cellValue = row[column.property];
            if (cellValue && fields.includes(column.property)) {
                const prevRow = visibleData[_rowIndex - 1];
                let nextRow = visibleData[_rowIndex + 1];
                if (prevRow && prevRow[column.property] === cellValue) {
                    return { rowspan: 0, colspan: 0 };
                } else {
                    let countRowspan = 1;
                    while (nextRow && nextRow[column.property] === cellValue) {
                        nextRow = visibleData[++countRowspan + _rowIndex];
                    }
                    if (countRowspan > 1) {
                        return { rowspan: countRowspan, colspan: 1 };
                    }
                }
            }
        },
        editEvent(row) {
            console.log(row);
        },
    },
};
</script>