a-table实现主子表合并功能
1.接口数据返回后循环判断并计算
rowSpan
2.普通字段使用customRender
属性来实现
3.操作列这钟需要重新渲染的字段则额外需要使用h
函数来实现,customRender属性中的children不支持jsx写法
1. 计算每行的rowspan
合并3行则rowspan为3,只有1行rowspan设为0
// 动态判断合并单元格行数
groupData(data) {
let currentBillNum = '';
return data.map((item, index) => {
if (
currentBillNum !== item.billNum) {
currentBillNum = item.billNum;
let rowSpan = 0;
for (let i = 0; i < data.length; i++) {
if (i >= index) {
const currentItem = data[i];
if (
currentBillNum === currentItem.billNum
) {
rowSpan += 1;
} else {
break;
}
}
}
item.rowSpan = rowSpan;
} else {
item.rowSpan = 0;
}
return item;
});
},
2. column配置字段属性
2.1 普通字段
如果attrs中的rowSpan属性不生效,则把attrs替换成props
{
title: '单据号',
dataIndex: 'billNum',
key: 'billNum',
width: '50px',
align: 'left',
customRender: (value, row, index) => {
const obj = {
children: value.text,
attrs: {},
};
obj.attrs.rowSpan = value.record.rowSpan;
return obj;
}
},
2.2 操作列字段(使用h函数)
{
title: '操作',
key: 'operation',
fixed: 'right',
width: '30px',
customRender: (value, row, index) => {
if (value.record.isAudit == '0') {
return {
children: Vue.h('div', {}, [
Vue.h("span", {
onclick: () => this.handleView(value.record.billID)
}, [Vue.h("i", { class: "low-code iconliulan1 option" })]),
Vue.h("span", {
onclick: () => this.handleEdit(value.record.billID)
}, [Vue.h("i", { class: "low-code iconbianji1 option" })]),
Vue.h("span", {
onclick: () => this.handleDelete(value.record.billID)
}, [Vue.h("i", { class: "low-code iconlajitong option" })]),
]),
attrs: {
rowSpan: value.record.rowSpan
}
}
} else {
return {
children: Vue.h('div', {}, [
Vue.h("span", {
onclick: () => this.handleView(value.record.billID)
}, [Vue.h("i", { class: "low-code iconliulan1 option" })])
]),
attrs: {
rowSpan: value.record.rowSpan
}
}
}
}
},