ant design 表格添加复选框
时间: 2023-08-03 12:04:36 浏览: 98
带复选框的表格树,可自由配置,带示例
4星 · 用户满意度95%
要在 Ant Design 表格中添加复选框,可以使用 `Checkbox` 组件和 `rowSelection` 属性。以下是一个示例代码:
```
import { Table, Checkbox } from 'antd';
const dataSource = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
];
const columns = [
{
title: '',
dataIndex: '',
key: '',
render: (text, record) => (
<Checkbox onChange={(e) => console.log(`checked: ${e.target.checked}`)} />
),
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
};
<Table dataSource={dataSource} columns={columns} rowSelection={rowSelection} />;
```
在上面的示例代码中,我们创建了一个 `Checkbox` 组件并将其添加到表格的第一列。然后我们使用 `rowSelection` 属性来启用行选择功能,并将其设置为一个对象,该对象包含一个 `onChange` 属性,该属性是一个回调函数,它会在选择行时触发。
阅读全文