Über die Lösung des häufigen Problems von form customRender und ScopedSlots in antdesign-vue
Es ist das erste Mal, dass ich die Ant-Komponente verwende, und ich habe viele Gefühle. Wir verwenden Tabellen am häufigsten in unserer Arbeit. Als Nagel im Element unterteilt Ant die Tabelle in Spalten und Datenquelle. Es scheint eine flexible Ant- Tabellenkomponente, aber tatsächlich sind die Konfigurationselemente sehr kompliziert. Die Grammatik ist auch sehr kompliziert. Lassen Sie uns heute über Ant-Table sprechen. Die Anforderung, auf die ich gestoßen bin, ist, dass die Statistiken am Ende der Tabelle zusammengeführt werden müssen.
Zelle Schauen Sie sich den Code an:
//最后一行的第二个单元格开始合并，横向合并两个单元格，通过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;
},
}
Es tritt jedoch das erste Problem auf: Nach der Zusammenführung gibt es eine zusätzliche Zelle in der Tabelle. Der Effekt ist wie folgt: Zu
diesem Zeitpunkt müssen wir die zusammenzuführenden Zellen manuell konfigurieren, sie manuell so konfigurieren, dass sie sich selbst töten, und sie ändern colspan auf 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;
},
},
Auf diese Weise ist unsere Tabelle normal, aber wenn Ihre zusammengeführten Zellen Slots haben, wird es Probleme geben. Sehen wir uns weiterhin an, dass
unsere Slots zu diesem Zeitpunkt nicht wirksam werden, da customRender umgestaltet wird. Zu diesem Zeitpunkt müssen wir dies tun Verwenden Sie natives js live jq, um dieses Problem zu lösen. Schauen Sie sich den Code an:
{
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;
},
},
Werfen wir einen Blick auf den Endeffekt
