vxe-table合并单元格

Question

有没有兄弟做过这样子vxe-table合并单元格 基于前一列后一列在其范围内合并单元格（求告知，也可以用element-plus）
现在我只能动态合并单元格

要实现这张图效果

代码如下 有往这方面需求的同学 可以拿走

<template>
    <div>
        <vxe-table border resizable height="500" :scroll-y="{ enabled: false }" :span-method="mergeRowMethod"
            :data="tableData3">
            <vxe-column field="id" title="ID" />
            <vxe-column field="key" title="设备名称" />
            <vxe-column field="num" title="Num" />
            <vxe-column field="content" title="Translate" />
            <vxe-column field="language" title="Language">
                <template v-slot="{ row }">
                    <div @click="getRow(row)">{{ row.language }}</div>
                </template>
            </vxe-column>
            <vxe-column title="操作">
                <template v-slot="{ row }">
                    <div @click="getRow(row)">获取数据</div>
                </template>
            </vxe-column>
        </vxe-table>
    </div>
</template>
  
<script setup>
import { ref, computed, onMounted } from 'vue';

const tableData3 = ref([])

const getDataList2 = () => {
    tableData3.value = [
        { id: '10001', key: 'app.label.name', num: 1, content: '名称', language: '1' },
        { id: '10002', key: 'app.label.name', num: 1, content: '名称', language: '2' },
        { id: '10003', key: 'app.label.name', num: 1, content: '性别', language: '3' },
        { id: '10004', key: 'app.label.name', num: 1, content: 'Sex', language: '4' },
        { id: '10004', key: 'app.label', num: 1, content: 'Sex', language: '4' },
        { id: '10005', key: 'app.label.age', num: 3, content: '年龄', language: '5' },
        { id: '10006', key: 'app.label.age', num: 3, content: 'Age', language: '6' },
        { id: '10007', key: 'app.label.age', num: 4, content: 'Age', language: '7' },
        { id: '10008', key: 'app.label.role', num: 4, content: 'Age', language: '8' },
        { id: '10009', key: 'app.label.address', num: 5, content: 'Age', language: '9' },
        { id: '10010', key: 'app.label.address', num: 5, content: 'Address', language: '10' },
        { id: '10011', key: 'app.label.address', num: 6, content: '昵称', language: '11' },
        { id: '10012', key: 'app.label.nickname', num: 6, content: 'Nickname', language: '12' }
    ]
}
// 通用行合并函数（将相同多列数据合并为一行）
const mergeRowMethod = ({ row, _rowIndex, column, visibleData }) => {
    console.log(row, _rowIndex, column, visibleData)
    const fields = ['key', 'num', 'content']
    const cellValue = row[column.field]
    if (cellValue && fields.includes(column.field)) {
        const prevRow = visibleData[_rowIndex - 1]
        let nextRow = visibleData[_rowIndex + 1]
        if (prevRow && prevRow[column.field] === cellValue) {
            return { rowspan: 0, colspan: 0 }
        } else {
            let countRowspan = 1
            while (nextRow && nextRow[column.field] === cellValue) {
                nextRow = visibleData[++countRowspan + _rowIndex]
            }
            if (countRowspan > 1) {
                return { rowspan: countRowspan, colspan: 1 }
            }
        }
    }
}
const getRow = (row) => {
    console.log(row)
}

onMounted(() => {
    getDataList2()
})

</script>

Answer 1

有两种解决方式（当时已解决，未更新状态）
1、一种是基于左侧合并规则依次合并
2、一种是选择要合并的列