ante-table-react 在table组件外实现全选
时间: 2024-02-17 22:03:30 浏览: 36
Ant Design 的 Table 组件提供了一个 `rowSelection` 属性,用于选择行。如果要在 Table 组件外实现全选,可以通过以下步骤实现:
1. 在 Table 组件外部创建一个复选框,用于全选/取消全选。
2. 在复选框的 `onChange` 事件中,通过 Table 组件的 `rowSelection` 属性的 `onChange` 方法来处理全选/取消全选的逻辑。
以下是一个简单的示例代码:
```
import React, { useState } from 'react';
import { Table } from 'antd';
function MyTable(props) {
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const handleSelectAll = (e) => {
const isChecked = e.target.checked;
const keys = props.dataSource.map((item) => item.key);
setSelectedRowKeys(isChecked ? keys : []);
};
const rowSelection = {
selectedRowKeys,
onChange: (selectedRowKeys) => {
setSelectedRowKeys(selectedRowKeys);
},
};
const columns = [
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'Address',
dataIndex: 'address',
},
];
return (
<>
<div style={{ marginBottom: '16px' }}>
<input type="checkbox" onChange={handleSelectAll} />
<span style={{ marginLeft: '8px' }}>Select All</span>
</div>
<Table dataSource={props.dataSource} columns={columns} rowSelection={rowSelection} />
</>
);
}
export default MyTable;
```
在上面的代码中,我们在 Table 组件外部创建了一个复选框,并在 `handleSelectAll` 方法中处理全选/取消全选的逻辑。在 `rowSelection` 属性中,我们将 `selectedRowKeys` 和 `onChange` 方法传递给了 Table 组件,用于处理行选择的逻辑。通过这种方式,我们就可以在 Table 组件外部实现全选/取消全选的功能了。