在使用 Ant Design 的 Table 组件时，可以通过修改 rowSelection 中的 selectedRowKeys 来清除选中的项。以下是一个实现示例，展示如何设置和清除选中项。
示例代码
import React, { useState } from 'react';
import { Table, Button } from 'antd';
const MyTableComponent = () => {
const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 用于管理选中项
const [loading, setLoading] = useState(false);
// 假设这是您的数据源
const initData = [
{
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',
},
// ...其他数据
];
const rowSelection = {
selectedRowKeys,
onChange: (newSelectedRowKeys) => {
setSelectedRowKeys(newSelectedRowKeys); // 更新选中的行键
},
};
const clearSelection = () => {
setSelectedRowKeys([]); // 清空选中的行
};
return (
<div>
<Button onClick={clearSelection} style={{ marginBottom: 16 }}>
清除选中项
</Button>
<Table
pagination={false}
rowSelection={rowSelection}
columns={[
{ title: '姓名', dataIndex: 'name', key: 'name' },
{ title: '年龄', dataIndex: 'age', key: 'age' },
{ title: '地址', dataIndex: 'address', key: 'address' },
]}
dataSource={initData}
loading={loading}
/>
</div>
);
};
export default MyTableComponent;
说明
状态管理：
- 使用
useState钩子来管理当前选中的行键（selectedRowKeys）。
- 使用
rowSelection对象：- 在
rowSelection中定义selectedRowKeys和其变化的回调函数onChange，用于更新所选的行。
- 在
清除选中项：
- 定义一个
clearSelection函数，调用该函数时将selectedRowKeys设置为空数组，以清空所有选中项。
- 定义一个
操作步骤
- 用户选择某些表格行。
- 点击 “清除选中项” 按钮。
- 表格的选择将被重置，没有任何行被选中。
这样，通过简单的状态更新，就可以实现对表格选择状态的控制。
内容由零声教学AI助手提供，问题来源于学员提问
![// 调用 zipImage 方法时
const zipBase64 = this.zipImage(images);
zipBase64返回的是Promise数据集，数据集中包含Base64数据，数据集格式如下：
imgStr1qwe Promise {<pending>}__proto__: Promise[[PromiseState]]:](https://linuxcpp.0voice.com/zb_users/upload/2023/05/202305162238408381987.png)
