el-table相同name的合并单元格

### Element UI `el-table` 合并相同 `name` 单元格 为了实现在 `el-table` 中合并具有相同 `name` 属性值的单元格，可以采用自定义合并逻辑的方式。具体来说，在表格组件中通过设置 `span-method` 来控制哪些单元格应该被合并。 #### 定义数据源 首先确保每一项记录都拥有唯一标识符以及待比较的关键字段（即 `name` 字段）。这里给出一个简化版的数据结构作为例子： ```javascript const tableData = [ {id: '1', name: 'Alice', age: 24, address: 'Beijing'}, {id: '2', name: 'Bob', age: 30, address: 'Shanghai'}, {id: '3', name: 'Alice', age: 28, address: 'Guangzhou'} ]; ``` #### 编写 spanMethod 函数 接着编写用于计算跨行/列范围的方法 `objectSpanMethod({ row, column, rowIndex, columnIndex })` 。此函数接收四个参数：当前行对象 (`row`)、当前列对象(`column`)、当前行索引(`rowIndex`) 和 当前列索引(`columnIndex`)。对于想要合并的第一列（假设为 `name` 列），可以通过遍历整个数组来决定该位置是否需要跨越多行显示[^1]。 下面是一个完整的 Vue 组件实例展示如何实现这一点: ```html <template> <div> <el-table :data="tableData" border style="width: 100%" :span-method="objectSpanMethod"> <!-- 表头 --> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { id: "1", name: "Alice", age: 24, address: "Beijing" }, { id: "2", name: "Bob", age: 30, address: "Shanghai" }, { id: "3", name: "Alice", age: 28, address: "Guangzhou" } ], mergeCache: {} // 存储已经处理过的重复名字及其对应的起始行号 }; }, methods: { objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { // 只针对第一列(name)做特殊处理 const key = `${row.name}`; let rowspan = this.mergeCache[key]?.length || 0; let colspan = 0; if (!this.mergeCache[key]) { this.mergeCache[key] = []; for(let i=rowIndex; i<this.tableData.length && this.tableData[i].name===key ;i++){ this.mergeCache[key].push(i); rowspan++; } if(rowspan>1){ this.$nextTick(() => { this.mergeCache[key][0]=rowspan; }); }else{ delete this.mergeCache[key]; } } if(this.mergeCache[key]){ rowspan=this.mergeCache[key][0]==rowIndex?this.mergeCache[key].length:0; colspan=1; if(rowIndex !== this.mergeCache[key][0]){ rowspan=0; } } return [rowspan,colspan]; } } } }; </script> ``` 上述代码片段展示了如何利用 `span-method` 属性配合 `objectSpanMethod()` 方法完成基于特定条件下的单元格合并操作。需要注意的是，实际应用时可能还需要考虑更多边界情况和性能优化问题[^2]。