根据antd表中的数据默认选择表行

Question

我是 antd 的新手，我的项目被困在一个地方。我想根据源数据或数据默认检查/选择行的复选框。

例如，如果我的数据源为

const data =
[ 
{
key: "1",
name: "John",
age: 22,
chosen: true,
working: null
},
{
key : "2",
name: "Jason",
age: 23,
chosen: false,
working: 'John'
}]

因此，根据数据源，如果任何对象选择 key 为 true，我想默认检查/选择这些行的复选框。

我可以根据所选键的值是否为真来过滤掉数据数组。但是如何默认选中该复选框呢？antd 表是否有任何道具，它将获取过滤数据的数组并检查/选择这些行的复选框？

我尝试使用 getCheckboxProps 中的 checked 属性检查行，但是当我在控制台中使用该属性时，我收到一条警告：“警告：[antd：Table] 不要设置checked或defaultCheckedin getCheckboxProps。请改用selectedRowKeys。”

下面是我当前正在使用的代码。

const data =
[ 
 {
  key: "1",
  name : "John",
  age : 22,
  chosen: true,
  working: null
 },
 {
  key : "2",
  name: "Jason",
  age: 23,
  chosen: false,
  working: "John"
 }
]

const fiterSelectedRows = data.filter(row => {
        return row.chosen;
});

const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(
                `selectedRowKeys: ${selectedRowKeys}`,
                "selectedRows: ",
                selectedRows
            );
        },
        getCheckboxProps: record => {
            return {
                disabled: record.working != null,
                name: record.working
            };
        }
};

<Table rowSelection={rowSelection} columns={columns} dataSource={data}/>

Answer 1

注意selectedRowKeys: data.filter(item => item.chosen).map(item => item.key)。selectedRowKeys包含项目的所有键，默认情况下会检查此处有键的所有项目。

您需要获取所有chosen真实的项目。

data.filter(item => item.chosen)
// [{key: '1', name: 'John Brown', ...},
//  {key: '3', name: 'Joe Black', ...},
//  {key: '4', name: 'Joe Black', ...}]
// all items have chosen is true

然后获取该数组的所有键。

data.filter(item => item.chosen).map(item => item.key)
// ['1', '2', '3']
// all keys of items have chosen is true

示例代码：

数据

const data = [{
  key: '1',
  name: 'John Brown',
  age: 32,
  chosen: true,
  address: 'New York No. 1 Lake Park',
}, {
  key: '2',
  name: 'Jim Green',
  age: 42,
  chosen: false,
  address: 'London No. 1 Lake Park',
}, {
  key: '3',
  name: 'Joe Black',
  age: 32,
  chosen: true,
  address: 'Sidney No. 1 Lake Park',
}, {
  key: '4',
  name: 'Disabled User',
  age: 99,
  chosen: true,
  address: 'Sidney No. 1 Lake Park',
}];

数据表

data.filter(item => item.chosen)
// [{key: '1', name: 'John Brown', ...},
//  {key: '3', name: 'Joe Black', ...},
//  {key: '4', name: 'Joe Black', ...}]
// all items have chosen is true