el-table合并相同名稱的行

<template><el-table:data="tableData":span-method="objectSpanMethod"border><el-table-columnprop="name"label="名稱"width="180"></el-table-column><el-table-columnprop="category"label="類別"width="180"></el-table-column><el-table-columnprop="date"label="日期"></el-table-column></el-table>
</template><script>
export default {data() {return {tableData: [{ name: '產品A', category: '電子產品', date: '2023-01-01' },{ name: '產品A', category: '電子產品', date: '2023-01-02' },{ name: '產品A', category: '電子產品', date: '2023-01-03' },{ name: '產品B', category: '辦公用品', date: '2023-01-01' },{ name: '產品B', category: '辦公用品', date: '2023-01-02' },{ name: '產品C', category: '家居用品', date: '2023-01-01' },{ name: '產品D', category: '體育用品', date: '2023-01-01' },{ name: '產品D', category: '體育用品', date: '2023-01-02' },],// 存儲需要合并的行信息spanArr: [],// 當前需要合并的行數position: 0};},mounted() {// 初始化時計算需要合并的行this.getSpanArr(this.tableData);},methods: {// 計算需要合并的行getSpanArr(data) {this.spanArr = [];this.position = 0;for (let i = 0; i < data.length; i++) {if (i === 0) {// 第一行默認需要合并1行this.spanArr.push(1);this.position = 0;} else {// 判斷當前行與上一行是否相同if (data[i].name === data[i - 1].name) {// 如果相同，上一行的合并數加1this.spanArr[this.position] += 1;// 當前行合并數為0（被合并）this.spanArr.push(0);} else {// 如果不同，重新開始計算合并數this.spanArr.push(1);this.position = i;}}}},// 合并方法objectSpanMethod({ row, column, rowIndex, columnIndex }) {// 只處理"名稱"列的合并if (columnIndex === 0) {const _row = this.spanArr[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col};}}}
};
</script>