Ant Design Table 清除选中项 - 两种方法实现
Ant Design Table 清除选中内容
要清除 Ant Design Table 中的选中项，可以通过以下两种方法实现：
1. 使用控制器状态
在你的组件中，创建一个状态变量来存储选中的行的 keys。然后在 Table 组件的 rowSelection 属性中设置 selectedRowKeys 为这个状态变量。当用户选择或取消选择行时，更新状态变量。
import React, { useState } from 'react';
import { Table } from 'antd';
const MyTable = () => {
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const handleSelectChange = (selectedRowKeys) => {
setSelectedRowKeys(selectedRowKeys);
};
const handleClearSelection = () => {
setSelectedRowKeys([]);
};
const rowSelection = {
selectedRowKeys,
onChange: handleSelectChange,
};
const dataSource = [
// 数据源
];
const columns = [
// 列定义
];
return (
);
};
export default MyTable;
2. 使用 Ref 引用
在你的组件中，创建一个 Ref 引用来引用 Table 组件。然后在清除选中按钮的点击事件处理程序中，通过 Ref 引用调用 Table 组件的 clearSelectedRows 方法。
import React, { useRef } from 'react';
import { Table } from 'antd';
const MyTable = () => {
const tableRef = useRef();
const handleClearSelection = () => {
tableRef.current.clearSelectedRows();
};
const dataSource = [
// 数据源
];
const columns = [
// 列定义
];
return (
);
};
export default MyTable;
以上两种方法都可以实现清除 Ant Design Table 中的选中项。选择其中一种方法来实现你的需求。
原文地址: https://www.cveoy.top/t/topic/qnQz 著作权归作者所有。请勿转载和采集!