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


鲁ICP备2022013712号-1
鲁公网安备 37068102000415号