vue element-ui 根据某字段内容一致的进行合并

 记录一下动态合并el表格的代码

注：此处需要后端配合 后端的数据顺序必须将一致需要合并的数组放在一起

<template>
  <div class="fqb_content" v-if="navData.selectVal == 4 && fqbShow">
        <div class="fqb_close" @click="fqbCloseF">X</div>
        <el-table :data="tableData" height="600" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 3%">
            <!-- <el-table-column prop="id" label="一级分区" width="180" /> -->
            <el-table-column prop="level1Code" label="一级编号" />
            <el-table-column prop="level1Zone" label="一级分区" />
            <el-table-column prop="level2Code" label="二级编号" />
            <el-table-column prop="level2Zone" label="二级分区" />
            <el-table-column prop="level3Code" label="三级编号" />
            <el-table-column prop="level3Zone" label="三级分区" />
            <el-table-column prop="level4Code" label="四级编号" />
            <el-table-column prop="level4Zone" label="四级分区" />
            <!-- <el-table-column prop="level5Code" label="五级编号" />
            <el-table-column prop="level5Zone" label="五级分区" /> -->
        </el-table>
    </div>
</template>

<script lang="ts" setup>
interface User {
    id: string
    level1Code: string
    level1Zone: string
    level2Code: string
    level2Zone: string
    level3Code: string
    level3Zone: string
    level4Code: string
    level4Zone: string
    level5Code: string
    level5Zone: string
}
interface SpanMethodProps {
    row: User
    column: TableColumnCtx<User>
    rowIndex: number
    columnIndex: number
}
const objectSpanMethod = ({
    row,
    column,
    rowIndex,
    columnIndex,
}: SpanMethodProps) => {
    // 合并单元格
    // console.log('row', row, 'column', column, 'rowIndex', rowIndex, 'columnIndex', columnIndex);
    //定义需要合并的列字段，有哪些列需要合并，就自定义添加字段即可
    const fields = ['level1Code', 'level1Zone', 'level2Code', 'level2Zone', 'level3Code', 'level3Zone', 'level4Code', 'level4Zone']
    // 当前行的数据
    const cellValue = row[column.property]
    // if (rowIndex == 0) { // 实现表头下面第一行数据，第一列合计展示时2列合并
    //     if (columnIndex === 0) {
    //         return { rowspan: 1, colspan: 0 } // 隐藏表头下面第一行的第一列
    //     }
    //     if (columnIndex === 1) {
    //         return { rowspan: 1, colspan: 2 } // 将表头下面第一行的第一列和第二列合并
    //     }
    // }

    // 判断只合并定义字段的列数据
    if (cellValue && fields.includes(column.property)) {
        const prevRow = tableData[rowIndex - 1] //上一行数据
        let nextRow = tableData[rowIndex + 1] //下一行数据
        // 当上一行的数据等于当前行数据时，当前行单元格隐藏
        if (prevRow && prevRow[column.property] === cellValue) {
            return { rowspan: 0, colspan: 0 }
        } else {
            // 反之，则循环判断若下一行数据等于当前行数据，则当前行开始进行合并单元格
            let countRowspan = 1 //用于合并计数多少单元格
            while (nextRow && nextRow[column.property] === cellValue) {
                nextRow = tableData[++countRowspan + rowIndex]
            }
            if (countRowspan > 1) {
                return { rowspan: countRowspan, colspan: 1 }
            }
        }
    }
}
<script>

此处借鉴了大佬的内容

vue elementui 动态表头、表头合并、合并行、合并列、行根据某字段内容一致的进行合并、表格列展开收起功能_elementui合并表头-CSDN博客