## 1.合并行:第一列，名稱相同時，將表格合并  ``` <!-- 列表 --> <template> <div> <el-table :data="list" border size="mini" :cell-style="{ 'text-align': 'center' }" :header-cell-style="{ 'text-align': 'center', 'font-size': '18px', color: 'green', background: '#f1f1f1', }" :span-method="arraySpanMethod" style="margin-top: 20px" > <el-table-column label="名稱" prop="name"></el-table-column> <el-table-column label="數量" prop="num"></el-table-column> <el-table-column label="編號" prop="code"></el-table-column> </el-table> </div> </template> ``` ``` //數據 list: [ { name: "名稱1", num: 1, code: "001" }, { name: "名稱2", num: 2, code: "002" }, { name: "名稱2", num: 4, code: "002" }, { name: "名稱2", num: 6, code: "002" }, { name: "名稱3", num: 3, code: "003" }, ], ``` **方法1:當前行字段和源數據對比，相等時合并** ``` //屬性：當前行row、當前列column、當前行號rowIndex、當前列號columnIndex arraySpanMethod({ row, column, rowIndex, columnIndex }) { // 合并行 名字相同合并 if (columnIndex === 0) { if (rowIndex === 0 || row.name != this.list[rowIndex - 1].name) { let rowspan = 0; this.list.forEach((element) => { if (element.name === row.name) { rowspan++; } }); return [rowspan, 1];//所占的行，列 } else { return [0, 0];//相等時合并 } } } ``` **方法2:通過上下行數據對比，相等時合并** ``` arraySpanMethod({ row, column, rowIndex, columnIndex }) { // 合并行 名字相同合并 const fields = ["name"]; //需要合并的字段 const cellValue = row[column.property]; //獲取當前行字段 //合并上下行，獲取上一行和下一行的數據和當前行對比，如果一致，合并上下行 if (cellValue && fields.includes(column.property) && columnIndex == 0) { const prevRow = this.list[rowIndex - 1]; //上一行的數據 let nextRow = this.list[rowIndex + 1]; //下一行數據 // 上一行 下一行數據與當前相等，合并 if (prevRow && prevRow[column.property] === cellValue) { return { rowspan: 0, colspan: 0 }; } else { let countRowspan = 1; while (nextRow && nextRow[column.property] === cellValue) { nextRow = this.list[++countRowspan + rowIndex]; } if (countRowspan > 1) { return { rowspan: countRowspan, colspan: 1 }; } } } }, ```