## 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 }; } } } }, ```