element-plus中的table为什么相同的数据并没有合并成一个

我想把所有的第一列的名字相同的内容合并。我发现只有相邻的数据合并了。实际上我想做到的是所有的后端给的数据，不管他的顺序怎样的，只有deviceTypeName 一样的都合并的。

在 element-plus 的 table 中，数据合并行通常是基于相邻行的数据进行合并的。这是因为表格渲染的逻辑是按照数据数组的顺序逐行渲染，并且合并行的实现通常是通过 span-method 方法来控制某些单元格的 rowspan 和 colspan 属性，以此来达到合并的效果。

常规的合并相邻的deviceTypeName 相同的数据的做法：

<el-table :data="tableData" :span-method="objectSpanMethod"><el-table-column prop="name" label="Name"></el-table-column><el-table-column prop="address" label="Address"></el-table-column></el-table>

 

const tableData = ref([{ id: 1, deviceTypeName : 'John', address: 'Address 1' },{ id: 1, deviceTypeName : 'John', address: 'Address 2' },{ id: 2, deviceTypeName : 'Jane', address: 'Address 3' },]);

 方法1：

const objectSpanMethod= ({ row, column, rowIndex, columnIndex })=> {if (columnIndex === 0) {const _row = flitterData(proTable.value?.tableData, 'deviceTypeName').one[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col,}}
}//把arr数组中name相同的元素合并
const flitterData= (arr, name)=> {let spanOneArr = []let concatOne = 0arr.forEach((item, index) => {if (index === 0) {spanOneArr.push(1)} else {if (item[name] === arr[index - 1][name]) {spanOneArr[concatOne] += 1spanOneArr.push(0)} else {spanOneArr.push(1)concatOne = index}}})return {one: spanOneArr,}
}

或者方法2：

const objectSpanMethod = ({row,column, rowIndex, columnIndex }: SpanMethodProps) => {if (columnIndex === 0) {const prevRow = proTable.value?.tableData[rowIndex - 1];if (prevRow && row.deviceTypeName == prevRow.deviceTypeName) {return {rowspan: 0,colspan: 1,};} else {let rowspan = 1;for (let i = rowIndex + 1; i < proTable.value?.tableData.length; i++) {if (proTable.value?.tableData[i].deviceTypeName == row.deviceTypeName) {rowspan++;} else {break;}}return {rowspan,colspan: 1,};}}
};

把上面的deviceTypeName改成你想要合并的参数名就可以啦

如果是不相领的内容合并就需要我们重新排序。把name相同的值放在一起。