AntD rowSelection 功能组件
AntD rowSelection functional Component
我正在尝试获取 table 中的单个元素键。
但是我得到了 undefined 如何获取 id?
https://ant.design/components/table/#components-table-demo-expand-children
const [select, setSelect] = useState({
selectedRowKeys: [],
loading: false,
});
console.log("selectedRowKeys", select);
const { selectedRowKeys, loading } = select;
const rowSelection = {
selectedRowKeys,
onChange: (selectedRowKeys) => {
setSelect({
...select,
selectedRowKeys: [...select.selectedRowKeys, selectedRowKeys],
});
},
};
return (
<div>
<Table
columns={columns}
rowSelection={rowSelection}
dataSource={dataSource}
loading={!props.employeeList}
/>
</div>);
Here's a screenshot of console.log()
您需要在 dataSource
数组的每个对象上添加一个 key 属性
const dataSource = [
{
key: 1,
name: `Edward King 1`,
age: 32,
address: `London, Park Lane no. 1`
},
{
key: 2,
name: `Edward King 2`,
age: 35,
address: `London, Park Lane no. 2`
}
];
然后在您的 rowSelection
对象中,您需要删除此代码 [...select.selectedRowKeys, selectedRowKeys]
,如果您 deselect 一个项目并再次 select 它,这将推送到状态并结果重复。应该是:
const rowSelection = {
selectedRowKeys,
onChange: (selectedRowKeys) => {
setSelect({
...select,
selectedRowKeys: selectedRowKeys
});
}
};
查看您的工作代码here
我正在尝试获取 table 中的单个元素键。 但是我得到了 undefined 如何获取 id?
https://ant.design/components/table/#components-table-demo-expand-children
const [select, setSelect] = useState({
selectedRowKeys: [],
loading: false,
});
console.log("selectedRowKeys", select);
const { selectedRowKeys, loading } = select;
const rowSelection = {
selectedRowKeys,
onChange: (selectedRowKeys) => {
setSelect({
...select,
selectedRowKeys: [...select.selectedRowKeys, selectedRowKeys],
});
},
};
return (
<div>
<Table
columns={columns}
rowSelection={rowSelection}
dataSource={dataSource}
loading={!props.employeeList}
/>
</div>);
Here's a screenshot of console.log()
您需要在 dataSource
数组的每个对象上添加一个 key 属性
const dataSource = [
{
key: 1,
name: `Edward King 1`,
age: 32,
address: `London, Park Lane no. 1`
},
{
key: 2,
name: `Edward King 2`,
age: 35,
address: `London, Park Lane no. 2`
}
];
然后在您的 rowSelection
对象中,您需要删除此代码 [...select.selectedRowKeys, selectedRowKeys]
,如果您 deselect 一个项目并再次 select 它,这将推送到状态并结果重复。应该是:
const rowSelection = {
selectedRowKeys,
onChange: (selectedRowKeys) => {
setSelect({
...select,
selectedRowKeys: selectedRowKeys
});
}
};
查看您的工作代码here