antdesign table 多选checkbox循环
时间: 2023-07-17 15:01:30 浏览: 101
checkbox多选
您好!对于 Ant Design Table 中的多选 Checkbox 循环,您可以使用 `rowSelection` 属性来实现。首先,您需要在 Table 组件中设置 `rowSelection` 属性,并将其值设为一个对象,其中包含 `type` 和 `selectedRowKeys` 两个属性。
`type` 属性指定选择类型,可以是 `'checkbox'` 或 `'radio'`。对于多选 Checkbox 循环,您需要将其设为 `'checkbox'`。
`selectedRowKeys` 属性是一个数组,用于存储选中行的 keys。您可以通过 `onChange` 事件来更新 `selectedRowKeys`。
下面是一个示例代码:
```jsx
import React, { useState } from 'react';
import { Table } from 'antd';
const data = [
{
key: '1',
name: 'John Doe',
age: 25,
},
{
key: '2',
name: 'Jane Smith',
age: 30,
},
// 其他数据行...
];
const DemoTable = () => {
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const rowSelection = {
type: 'checkbox',
selectedRowKeys,
onChange: (selectedKeys) => {
setSelectedRowKeys(selectedKeys);
},
};
return (
<Table
rowSelection={rowSelection}
columns={columns}
dataSource={data}
/>
);
};
export default DemoTable;
```
在上述示例中,我们通过 `useState` 创建了一个名为 `selectedRowKeys` 的状态,用于存储选中行的 keys。`onChange` 事件会在选择发生变化时触发,并将选中行的 keys 更新到 `selectedRowKeys` 中。
希望这个示例能帮到您!如有更多问题,请随时提问。
阅读全文