About the solution to the common problem of form customRender and scopedSlots in antdesign-vue
It’s the first time I use ant component, and I have a lot of feelings. We use table most in our work. As a nail in the element, ant divides table into columns and data-source. It seems to be a flexible ant-table component, but in fact, the configuration items are very complicated. , the grammar is also very complicated. Let’s talk about ant-table today. The requirement I encountered is that the statistics at the bottom of the table need to be merged
. Cell, look at the code:
//最后一行的第二个单元格开始合并，横向合并两个单元格，通过customRender
{
title: 'xxxx',
dataIndex: 'contractAmount',
key: 'contractAmount',
customRender: (text, record, index) => {
const obj = {
children: text,
attrs: {
},
};
if (index == this.data.length - 1) {
obj.attrs.colSpan = 2;
obj.attrs.align = 'center';
}
return obj;
},
}
But the first problem arises. After the merge, there will be an extra cell in the table. The effect is as follows: At
this time, we need to manually configure the cells to be merged, manually configure them to kill themselves, and change colspan to 0
{
title: '完成量(吨)',
dataIndex: 'completedAmount',
key: 'completedAmount',
customRender: (text, record, index) => {
const obj = {
children: text,
attrs: {
},
};
if (index == this.data.length - 1) {
obj.attrs.colSpan = 0;//将colspan改为0
}
return obj;
},
},
In this way, our table is normal, but if your merged cells have slots, there will be problems. Let’s continue to see that
because customRender will be refactored, our slots will not take effect at this time. At this time, we need to use native js live jq to solve this problem, look at the code:
{
title: '履约详情',
key: 'action',
customRender: (text, record, index) => {
//这里其实就是不用插槽，每一行手动创建一个元素并且用原生的方式绑定事件，再将record传出去，代替插槽的功能，这样就完成
const child = this.$createElement('a', {
domProps: {
innerHTML: '查看详情',
},
on: {
click: () => {
this.look(record);
},
},
});
const obj = {
children: child,
attrs: {
},
};
if (index == this.data.length - 1) {
obj.attrs.colSpan = 0;
}
return obj;
},
},
Let's take a look at the final effect
