关于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来解决这个问题,看代码:文章来源:https://uudwc.com/A/Ey8Ga
{
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;
},
},
来看一眼最后的效果吧文章来源地址https://uudwc.com/A/Ey8Ga