antdesign-vueのフォームcustomRenderとscopedSlotsの共通問題の解決方法について
初めて ant コンポーネントを使ったときは、いろいろな感想がありましたが、私たちの仕事で一番よく使うのはテーブルです 要素の爪として、テーブルを列とデータソースに分割しています 柔軟な ant テーブルコンポーネントだと思います, しかし実際には、設定項目は非常に複雑です。文法も非常に複雑です。今日は 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;
},
},
最終的な効果を見てみましょう
