最近工作中有一个需求,ant design vue 使用table 多选功能,实现默认勾选符合条件的单条数据。
官网没有例子,参考了好多博客没有实现,而且也都是大同小异,在这记录自己摸索实现的片段。
// :rowSelection="rowSelection" 配置选择功能。
<a-table :columns="columns"
:loading='loading'
:rowKey="row=>row.id"
:pagination="pagination"
:dataSource="tabledata"
:rowSelection="rowSelection"
>
// getCheckboxProp 配置选择框的默认属性defaultChecked即可
computed: {
rowSelection () {
const { selectedRowKeys } = this;
return {
onChange: (selectedRowKeys, selectedRows) => {
console.log(selectedRows)
console.log(`selectedRowKeys: ${selectedRowKeys}`);
},
selections: true, // 不设置的话表格项不可以手动勾选和取消
getCheckboxProps: record => {
return {
props: {
// record为当前行数据 逻辑是 record.goodsId != null 的行默认勾选(条件)
defaultChecked: record.goodsId != null
}
};
},
};
},
},