elementPlus实现动态表格单元格合并span-method方法总结

最近在做PC端需求的时候，需要把首列中相邻的同名称单元格合并。
我看了一下elementPlus官网中的table表格，span-method可以实现单元格合并。

我们先看一下官网的例子：

合并行或列

多行或多列共用一个数据时，可以合并行或列。

通过给 table 传入span-method方法可以实现合并行或列， 方法的参数是一个对象，里面包含当前行 row、当前列 column、当前行号 rowIndex、当前列号 columnIndex 四个属性。 该函数可以返回一个包含两个元素的数组，第一个元素代表 rowspan，第二个元素代表 colspan。 也可以返回一个键名为 rowspan 和 colspan 的对象。
rowspan：合并几行
colspan：合并几列

<template><div><el-table:data="tableData":span-method="arraySpanMethod"borderstyle="width: 100%"><el-table-column prop="id" label="ID" width="180" /><el-table-column prop="name" label="Name" /><el-table-column prop="amount1" sortable label="Amount 1" /><el-table-column prop="amount2" sortable label="Amount 2" /><el-table-column prop="amount3" sortable label="Amount 3" /></el-table><el-table:data="tableData":span-method="objectSpanMethod"borderstyle="width: 100%; margin-top: 20px"><el-table-column prop="id" label="ID" width="180" /><el-table-column prop="name" label="Name" /><el-table-column prop="amount1" label="Amount 1" /><el-table-column prop="amount2" label="Amount 2" /><el-table-column prop="amount3" label="Amount 3" /></el-table></div>
</template><script lang="ts" setup>
import type { TableColumnCtx } from 'element-plus'interface User {id: stringname: stringamount1: stringamount2: stringamount3: number
}interface SpanMethodProps {row: Usercolumn: TableColumnCtx<User>rowIndex: numbercolumnIndex: number
}const arraySpanMethod = ({row,column,rowIndex,columnIndex,
}: SpanMethodProps) => {if (rowIndex % 2 === 0) {if (columnIndex === 0) {return [1, 2] // // 合并1行 合并2列} else if (columnIndex === 1) {return [0, 0]}}
}const objectSpanMethod = ({row,column,rowIndex,columnIndex,
}: SpanMethodProps) => {if (columnIndex === 0) {if (rowIndex % 2 === 0) {  // 2、4、6、8......return {rowspan: 2, // 合并2行colspan: 1, // 合并1列}} else {return {rowspan: 0,colspan: 0,}}}
}const tableData: User[] = [{id: '12987122',name: 'Tom',amount1: '234',amount2: '3.2',amount3: 10,},{id: '12987123',name: 'Tom',amount1: '165',amount2: '4.43',amount3: 12,},{id: '12987124',name: 'Tom',amount1: '324',amount2: '1.9',amount3: 9,},{id: '12987125',name: 'Tom',amount1: '621',amount2: '2.2',amount3: 17,},{id: '12987126',name: 'Tom',amount1: '539',amount2: '4.1',amount3: 15,},
]
</script>

效果如下：

好了，官网例子看过，来看看我在实际项目中是怎么应用的。
需要处理的数据如下：

let data = [{firstName: '基本证照',code: '001',secondName: '营业执照',sort: '30',fileList: [{id: '1',name: '营业执照照片'}]},{firstName: '基本证照',code: '002',secondName: '身份证照',sort: '40',fileList: [{id: '2',name: '身份证照照片'}]},{firstName: '现场照片',code: '003',secondName: '公司前台照',sort: '50',fileList: [{id: '3',name: '公司前台照照片'}]},{firstName: '现场照片',code: '004',secondName: '公司工位照',sort: '60',fileList: [{id: '4',name: '公司工位照照片'}]},{firstName: '经营证明',code: '005',secondName: '工厂生产照',sort: '70',fileList: [{id: '5',name: '工厂生产照照片'}]}]

需要展示的效果是：
首列中只有三行（基本证照、现场照片、经营证明）
也就是说 基本证照、现场照片这个两个首列需要合并两行

封装的函数如下，函数中都是注释，对函数中的定义和字段做了详细的说明。

        // 合并单元格规则（data为表格数据，cateName为合并字段的名称）这个函数的作用是对首列中的行进行合并function objSpanMethod({ row, column, rowIndex, columnIndex }, data, cateName) {// 非首列的数据都返回，不往下进行if (columnIndex !== 0) {return}let arrLength = [] // 存放secondName对应的数据数组长度let cateRows = [] // 存放起始合并行以及合并行数data.reduce((preValue, curValue, index, array) => {if (index == 0 || preValue[cateName] != curValue[cateName]) {arrLength.push(1)} else {arrLength[arrLength - 1]++}return curValue}, data[0])// 获取存放起始合并行以及合并行数arrLength.reduce((pre, cur, index, value) => { // pre指的是上一次计算过后的prev + cur这个值cateRows.push({ rowIndex: prev, rowspan: cur }); // rowIndex指的是从第几行开始合并，rowspan指的是合并几行return prev + cur}, 0)let intRowSpan = 0;for (let i = 0; i < arrLength.length; i++) {if (cateRows[i].rowIndex == rowIndex) {intRowSpan = cateRows[i].rowspan;break;}}return {// 当渲染执行到某一行的首列时，或者执行到首列时，对其中的行进行渲染时，例如渲染到第四行时，发现rowspan为3时，// 那就是首列中从第四行开始合并，合并3行，四、五、六这三行合并为一行。rowspan: intRowSpan,colspan: intRowSpan == 0 ? 0 : 1  // 如果不合并行，就返回0，说白了就不合并}}

具体的使用请看以下完整的代码：

<template><div class="table"><el-table:data="data":span-method="(param) => objSpanMethod(param, data, 'firstName')"><el-table-colum prop="firstName" label="资料分类" width="150" /><el-table-colum prop="secondName" label="资料名称" /><el-table-colum prop="fileList" label="已上传资料"><template #default="{ row }"><p v-for="(item,index)" in row.fileList :key="item?.name + index"><span>{{ item?.name }}</span></p></template></el-table-colum></el-table></div>
</template><script setup>
// data是接口请求回来的数据
// 数据如下：
let data = [{firstName: "基本证照",code: "001",secondName: "营业执照",sort: "30",fileList: [{id: "1",name: "营业执照照片",},],},{firstName: "基本证照",code: "002",secondName: "身份证照",sort: "40",fileList: [{id: "2",name: "身份证照照片",},],},{firstName: "现场照片",code: "003",secondName: "公司前台照",sort: "50",fileList: [{id: "3",name: "公司前台照照片",},],},{firstName: "现场照片",code: "004",secondName: "公司工位照",sort: "60",fileList: [{id: "4",name: "公司工位照照片",},],},{firstName: "经营证明",code: "005",secondName: "工厂生产照",sort: "70",fileList: [{id: "5",name: "工厂生产照照片",},],},
];// 合并单元格规则（data为表格数据，cateName为合并字段的名称）这个函数的作用是对首列中的行进行合并
function objSpanMethod({ row, column, rowIndex, columnIndex }, data, cateName) {// 非首列的数据都返回，不往下进行if (columnIndex !== 0) {return;}let arrLength = []; // 存放secondName对应的数据数组长度let cateRows = []; // 存放起始合并行以及合并行数data.reduce((preValue, curValue, index, array) => {if (index == 0 || preValue[cateName] != curValue[cateName]) {arrLength.push(1);} else {arrLength[arrLength - 1]++;}return curValue;}, data[0]);// 获取存放起始合并行以及合并行数arrLength.reduce((pre, cur, index, value) => {// pre指的是上一次计算过后的prev + cur这个值cateRows.push({ rowIndex: prev, rowspan: cur }); // rowIndex指的是从第几行开始合并，rowspan指的是合并几行return prev + cur;}, 0);let intRowSpan = 0;for (let i = 0; i < arrLength.length; i++) {if (cateRows[i].rowIndex == rowIndex) {intRowSpan = cateRows[i].rowspan;break;}}return {// 当渲染执行到某一行的首列时，或者执行到首列时，对其中的行进行渲染时，例如渲染到第四行时，发现rowspan为3时，// 那就是首列中从第四行开始合并，合并3行，四、五、六这三行合并为一行。rowspan: intRowSpan,colspan: intRowSpan == 0 ? 0 : 1, // 如果不合并行，就返回0，说白了就不合并};
}
</script><style>
</style>

这样就完全实现了首列中行的合并。总结这些呢，主要是记录下rowspan：合并几行
colspan：合并几列这个规则，还是就是合并行中对于数据的处理。

好记性不如烂笔头，虽然当时明白的很好，但是还是总结记录下来最好。