antdesign-vue의 customRender 및 scopedSlots 형식의 일반적인 문제에 대한 솔루션 정보
ant 컴포넌트를 처음 사용했을때 느낌이 많이 왔는데 저희 작업에서는 table을 가장 많이 사용합니다. , 근데 사실 구성항목이 너무 복잡해요 , 문법도 엄청 복잡해요 오늘은 ant-table 에 대해 얘기해볼게요 제가 만난 요구사항은 테이블 하단에 있는 통계를 머지해야 한다는 거에요 . 셀,
봐요 코드에서:
//最后一行的第二个单元格开始合并，横向合并两个单元格，通过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;
},
}
그러나 첫 번째 문제가 발생합니다. 병합 후 테이블에 추가 셀이 있을 것입니다. 그 효과는 다음과 같습니다
. 콜스팬을 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;
},
},
최종 효과를 살펴보겠습니다.
