效果
实现方法
首先按照官方文档开启表格
1. 在table组件中添加 rowSelection 属性
const [selectedRowKeys, setSelectedRowKeys] = useState([]);//存储选中的数据
<Table
rowSelection={rowSelection}//开启表头选择
columns={columns}
loading={tableData.loading}
dataSource={tableData.data}
rowKey={(record) => record.id}
pagination={false}
/>
const onSelectChange = (newSelectedRowKeys) => {
console.log('selectedRowKeys changed: ', selectedRowKeys);
setSelectedRowKeys(newSelectedRowKeys);
};
const rowSelection = {
selectedRowKeys,
onChange: onSelectChange,
};
2.添加CheckBox
<Checkbox
onChange={selectAll}//选择时的回调
checked={tableData.data.length == selectedRowKeys.length} //控制选中状态
style={{ marginLeft: 10 }}
>
选中本页
<Button disabled={!selectedRowKeys.length > 0} style={{ marginLeft: 20 }}> 删除选中</Button>
</Checkbox>
3. CheckBox的回调函数
const selectAll = (e) => {
let newSelect = [];//定义一个数组
if (e.target.checked == true) {
tableData.data.map((item) => {//遍历表格数据
newSelect.push(item.id);//将每组数据下的key添加到定义的数组中
})
setSelectedRowKeys(newSelect)//修改选择数组
} else {
setSelectedRowKeys(newSelect)
}
};