AntDesignVue表格合并行

需求使用Ant Design Vue 的 Table 组件需要对表格数据进行处理使有相同字段的邻近行合并使内容更加清晰就像 Excel 一样。实现原理表格组件提供了customCell属性可以通过设置rowSpan来控制单元格的行合并设置rowSpan: 数字→ 向下合并对应行数设置rowSpan: 0→ 隐藏该单元格不渲染关键限制需要合并的数据必须是连续的。因此通常要先对数据按合并字段排序再处理合并逻辑。具体实现方式使用customCell推荐这是官方推荐的做法直接在列配置中定义合并逻辑/** * param record 当前行数据 * param index 当前行的角标 * param tablestore 全局存储 * param getTableData 获取当前table的所有数据需先set) */ export const columns: BasicColumn[] [ { title: 工号, dataIndex: jobNumber, width: 120, customCell: (record: any, index: number) { const a tablestore.getTableData; const tableData JSON.parse(JSON.stringify(a)); // 1. 判断当前行是否应该被合并掉与上一行相同 if (index ! 0 record.jobNumber tableData[index - 1].jobNumber) { return { rowSpan: 0 }; } // 2. 计算后续相同 jobNumber 的数量 let rowSpan 1; for (let i index 1; i tableData.length; i) { if (tableData[i].jobNumber ! record.jobNumber) break; rowSpan; } return { rowSpan: rowSpan }; }, }, ... ]