关于antdesign-vue中表格customRender与scopedSlots共用问题的解决
第一次使用ant组件，感触很多，我们工作中我们使用的最多还是table，作为element的钉子户，ant把table分为了columns和data-source,看似灵活ant-table组件，其实配置项很复杂，语法也很复杂，今天就来说一说ant-table，我遇到的需求就是表格最下面出现统计需要合并单元格，先上图片
上面是ui图的效果，那我们最下面一行就需要合并单元格，来看代码：
//最后一行的第二个单元格开始合并，横向合并两个单元格，通过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;
},
}
但是第一个问题出现了，合并完后表格会多出一格，效果如下：
这个时间我们需要，手动将被合并的单元格，手动配置将自身干掉，将colspan改为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;
},
},
这样我们的表格就正常，但是如果你合并的单元格有插槽的情况会有问题，我们继续来看
由于customRender会重构，这时我们的插槽是不生效的，这时我们需要用原生js活jq来解决这个问题，看代码：
{
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;
},
},
来看一眼最后的效果吧
