在Vue框架下实现表格行合并的两种方法

<template>
    <div class="about">
        <h2 style="margin-top: 10px;">element-plus 合并行示例</h2>
        <div style="margin-bottom: 10px;">
            在Vue中使用Element UI的el-table组件时，可以通过span-method属性来合并表格中的单元格。
        </div>
        <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%">
            <el-table-column prop="name" label="Name" />
            <el-table-column prop="age" label="Age"  />
            <el-table-column prop="address" label="Address" />
        </el-table>
    </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
const spanArr = ref([])
const tableData = ref([
    { key: '1', name: 'Mike', age: 30, address: 'Chicago' },
    { key: '2', name: 'Alice', age: 22, address: 'Phoenix' },
    { key: '3', name: 'John', age: 25, address: 'New York' },
    { key: '4', name: 'Mike', age: 31, address: 'Houston' },
    { key: '5', name: 'John', age: 26, address: 'Los Angeles' },
    { key: '6', name: 'jack', age: 22, address: 'aPhoenix' },
])
// 排序方法
const sortData = () => {
    tableData.value.sort((a, b) => a.name.localeCompare(b.name))
    // 计算合并行数
    calculateSpanArr()
}
// 计算合并行数
const calculateSpanArr = () => {
    const tempArr = []
    let position = 0
    // 这里以姓名重复的数据进行合并，实际应用中可以根据需求调整合并规则
    tableData.value.forEach((item, index) => {
        if (index === 0) {
            tempArr.push(1)
            position = 0
        } else {
            if (item.name === tableData.value[index - 1].name) {
                tempArr[position] += 1
                tempArr.push(0)
            } else {
                tempArr.push(1)
                position = index
            }
        }
    })
    spanArr.value = tempArr
}
// 合并单元格方法
const objectSpanMethod = ({ columnIndex, rowIndex }) => {
    if (columnIndex === 0) {
        return {
            rowspan: spanArr.value[rowIndex],
            colspan: spanArr.value[rowIndex] > 0 ? 1 : 0
        }
    }
    return { rowspan: 1, colspan: 1 }
}
onMounted(() => {
    sortData() // 初始加载时自动排序
})
</script>

<template>
    <div class="about">
        <h2 style="margin-top: 10px;">ant-design-vue 合并行示例</h2>
        <div style="margin-bottom: 10px;">
            以下是基于Ant Design Vue的表格合并实现，使用customCell和customRender实现首列相同数据合并：
        </div>
        <a-table :dataSource="tableData" :columns="columns" bordered  />
    </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'

const tableData = ref([
    { key: '1', name: 'Mike', age: 30, address: 'Chicago' },
    { key: '2', name: 'Alice', age: 22, address: 'Phoenix' },
    { key: '3', name: 'John', age: 25, address: 'New York' },
    { key: '4', name: 'Mike', age: 31, address: 'Houston' },
    { key: '5', name: 'John', age: 26, address: 'Los Angeles' },
    { key: '6', name: 'jack', age: 22, address: 'aPhoenix' },
])

// 转换为 element-plus 合并行格式
const spanMap = ref({})

// 计算合并规则
const calculateSpans = () => {
    const tempMap = {}
    let position = 0
    // 这里以姓名重复的数据进行合并，实际应用中可以根据需求调整合并规则
    tableData.value.forEach((item, index) => {
        if (index === 0) {
            tempMap[index] = { span: 1 }
            position = 0
        } else {
            if (item.name === tableData.value[index - 1].name) {
                tempMap[position].span += 1
                tempMap[index] = { span: 0 }
            } else {
                tempMap[index] = { span: 1 }
                position = index
            }
        }
    })
    spanMap.value = tempMap
}

// 排序方法
const sortData = () => {
    tableData.value.sort((a, b) => a.name.localeCompare(b.name))
    // 重新计算合并规则
    calculateSpans()
}

// 列定义
const columns = [
    {
        title: 'Name',
        dataIndex: 'name',
        customCell: (_, index) => {
            return {
                rowSpan: spanMap.value[index]?.span || 0
            }
        }
    },
    {
        title: 'Age',
        dataIndex: 'age'
    },
    {
        title: 'Address',
        dataIndex: 'address'
    }
]

onMounted(() => {
    sortData() // 初始加载时自动排序
})
</script>