默认情况下，根据 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'
}]

因此，如果任何对象选择了键为true，则基于数据源，我想默认选中/选中这些行的复选框。

我可以根据所选键的值是否为 true 过滤掉数据数组。但是默认情况下如何选中复选框？antd 表是否有任何 prop，它将获取过滤数据的数组并选中/选中这些行的复选框？

我尝试在getCheckboxProps中使用checkboxProps中的check属性检查行，但是当我在控制台中使用它时，我收到一条警告，指出"警告：[antd：表]不要在getCheckboxProps中设置checked或defaultChecked。请改用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',
}];

数据表

class App extends React.Component {
state = {
selectedRowKeys: data.filter(item => item.chosen).map(item => item.key), // Check here to configure the default column
loading: false,
};
start = () => {
this.setState({ loading: true });
// ajax request after empty completing
setTimeout(() => {
this.setState({
selectedRowKeys: [],
loading: false,
});
}, 1000);
};
onSelectChange = selectedRowKeys => {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.setState({ selectedRowKeys });
};
render() {
const { loading, selectedRowKeys } = this.state;
const rowSelection = {
selectedRowKeys,
onChange: this.onSelectChange,
};
const hasSelected = selectedRowKeys.length > 0;
return (
<div>
<div style={{ marginBottom: 16 }}>
<Button type="primary" onClick={this.start} disabled={!hasSelected} loading={loading}>
Reload
</Button>
<span style={{ marginLeft: 8 }}>
{hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
</span>
</div>
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
</div>
);
}
}

Answer 2

上面的作者说的都是对的，我决定分享我的经验。我有一个没有键字段的对象数组(你好后端(。最初，我按条件(取决于您的任务(过滤了此数组，例如，coin_symbol字段 === "WBNB"。过滤后，我立即使用 map 创建一个新数组。不要忘记做地方状态。

const [selectedRowKeys, setSelectedRowKeys] = useState()
setSelectedRowKeys(dashboardData?.filter(i => i.coin_symbol === 'WBNB').map(i => i.id))

然后，在挖掘表格道具之后，我看到了一个 props defaultSelectedRowKeys，它需要一个数组。此外，一切都很简单 - 为此 props 为我们的新数组分配值。

const rowSelection = { defaultSelectedRowKeys: selectedRowKeys, ...otherProps (like onChange, getCheckboxProps, etc.)

另一件重要的事情 - 如果您像我一样拥有来自服务器的数据很长，最好不要呈现表格，而是例如某种加载文本或滑块。

selectedRowKeys ? <YourTable dataSource={yourData} rowSelection={rowSelection}/> : <Loader/>

我希望它对某人有所帮助！(~ ▽ ̄(~