el-table 单元格根据后端返回合并

### 动态合并单元格的实现 在 `el-table` 中，可以通过设置属性 `:span-method` 来定义单元格的合并逻辑。以下是基于后端返回数据动态合并单元格的具体实现方法。 #### 数据结构准备 假设后端返回的数据如下： ```json [ { name: '张三', age: 20, score: 85 }, { name: '李四', age: 20, score: 90 }, { name: '王五', age: 21, score: 75 } ] ``` 如果需要根据年龄字段进行合并，则可以先处理数据并计算出每一行的跨度信息。 --- #### 合并逻辑函数 通过自定义 `span-method` 方法来控制哪些单元格需要被合并。以下是一个完整的 Vue 实现示例： ```vue <template> <el-table :data="tableData" border style="width: 100%" :span-method="objectSpanMethod"> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="age" label="年龄" width="180"></el-table-column> <el-table-column prop="score" label="分数"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20, score: 85 }, { name: '李四', age: 20, score: 90 }, { name: '王五', age: 21, score: 75 } ], spanArr: [], // 存储每列的跨行数 pos: 0 // 当前位置索引 }; }, created() { this.getSpanArr(); }, methods: { getSpanArr() { const spans = []; let prevAge = null; let count = 1; this.tableData.forEach((item, index) => { if (prevAge === item.age && index !== 0) { count++; spans[index - 1][0] = 0; // 上一行隐藏 } else { if (index !== 0) { spans.push([count, 1]); // 记录当前行的跨行数 count = 1; } else { spans.push([1, 1]); } } prevAge = item.age; }); this.spanArr = spans; }, objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 1) { // 只针对第二列（年龄） const _row = this.spanArr[rowIndex][0]; const _col = this.spanArr[rowIndex][1]; if (_row > 0) { return { rowspan: _row, colspan: _col }; // 设置跨行和跨列 } else { return { rowspan: 0, colspan: 0 }; // 隐藏该单元格 } } return { rowspan: 1, colspan: 1 }; // 默认不合并其他列 } } }; </script> ``` --- #### 关键点解析 1. **数据预处理** 使用 `getSpanArr()` 函数遍历数据列表，记录每个相同值的连续次数，并将其存储到 `spanArr` 数组中[^1]。 2. **动态调整跨行列数** 在 `objectSpanMethod` 方法中判断当前列是否需要合并。如果是目标列（如本例中的“年龄”），则依据 `spanArr` 的值决定其跨行数；如果不是目标列，则保持默认状态[^2]。 3. **性能优化** 如果存在大量数据或复杂业务场景，建议提前缓存好跨行信息以减少重复计算开销[^3]。 --- #### 已知问题与解决方案 当鼠标悬停时可能出现 hover 效果异常的情况。解决此问题的方法包括但不限于： - 自定义样式类名 (`cell-class-name`) 并手动绑定事件监听器。 - 利用 `cell-mouse-enter` 和 `cell-mouse-leave` 进一步增强交互体验。 ---