效果图:
大致思路:el-table里添加合并行或列的计算方法span-method
<el-table :data="tableList" :span-method="objectSpanMethod">
// 在获取到列表数据tableData后调用此方法 handleTableData(tableData) {let rowSpanArr = [], position = 0;for (let [index, item] of tableData.entries()) {if (index === 0) {rowSpanArr.push(1);position = 0;} else {// 此处判断userName相同时进行合并,需要替换自己的属性名if (item.userName === tableData[index - 1].userName) {rowSpanArr[position] += 1; //名称相同,合并到同一个数组中rowSpanArr.push(0);} else {rowSpanArr.push(1);position = index;}}}this.rowSpanArr = rowSpanArr;},// 合并行或列的计算方法objectSpanMethod({ row, column, rowIndex, columnIndex }) {// userName属性对应列表第0列if (columnIndex === 0 ) {if (this.rowSpanArr.length > rowIndex) {const rowSpan = this.rowSpanArr[rowIndex];return {rowspan: rowSpan, //行colspan: 1 //列};}}},