2023年2月1日
Ant Design of Vue合并行
<a-table>需要列相同行值进行行合并,现整理了下实现代码,使用官方组件的基础上,进行相同值的行进行合并处理逻辑,代码及效果如下:
{ title:'分类', align:"center", dataIndex: 'classification_dictText', customRender: (value, row, index) => { const obj = { children: value, attrs:{}, }; console.log(this.dataSource2) let min = 0 let num = 0 for (let i = 0;i < this.dataSource2.length;i++) { console.log(this.dataSource2[i].classification_dictText) console.log(value) if (this.dataSource2[i].classification_dictText == value) { min = i break } } for (let i = 0;i < this.dataSource2.length;i++) { if (this.dataSource2[i].classification_dictText == value) { num = num +1 } } if (index == min) { obj.attrs.rowSpan = num; } let max = min + num if (index > min && index< max) { obj.attrs.rowSpan = 0; } return obj; } }, { title:'类别', align:"center", dataIndex: 'category_dictText', customRender: (value, row, index) => { const obj = { children: value, attrs:{}, }; let min = 0 let num = 0 for (let i = 0;i < this.dataSource2.length;i++) { if (this.dataSource2[i].category_dictText == value) { min = i break } } for (let i = 0;i < this.dataSource2.length;i++) { if (this.dataSource2[i].category_dictText == value) { num = num +1 } } if (index == min) { obj.attrs.rowSpan = num; } let max = min + num if (index > min && index< max) { obj.attrs.rowSpan = 0; } return obj; } },