最近工作中有一個(gè)需求麻蹋，ant design vue 使用table 多選功能韩肝，實(shí)現(xiàn)默認(rèn)勾選符合條件的單條數(shù)據(jù)诈悍。
官網(wǎng)沒有例子祸轮，參考了好多博客沒有實(shí)現(xiàn)，而且也都是大同小異侥钳，在這記錄自己摸索實(shí)現(xiàn)的片段适袜。
// :rowSelection="rowSelection" 配置選擇功能。
<a-table :columns="columns"
:loading='loading'
:rowKey="row=>row.id"
:pagination="pagination"
:dataSource="tabledata"
:rowSelection="rowSelection"
>
// getCheckboxProp 配置選擇框的默認(rèn)屬性defaultChecked即可
computed: {
rowSelection () {
const { selectedRowKeys } = this;
return {
onChange: (selectedRowKeys, selectedRows) => {
console.log(selectedRows)
console.log(`selectedRowKeys: ${selectedRowKeys}`);
},
selections: true, // 不設(shè)置的話表格項(xiàng)不可以手動(dòng)勾選和取消
getCheckboxProps: record => {
return {
props: {
// record為當(dāng)前行數(shù)據(jù) 邏輯是 record.goodsId != null 的行默認(rèn)勾選（條件）
defaultChecked: record.goodsId != null
}
};
},
};
},
},
