React Ant Design Table中如何基于当前选中的行禁用指定行?
React Ant Design Table中如何基于当前选中的行禁用指定行?
嘿,我刚好处理过类似的需求,其实要实现基于当前选中行来禁用指定行的功能,核心就是用好Antd Table rowSelection配置里的getCheckboxProps回调,结合已选中的行状态来动态控制。
首先,先把你的代码补全并优化一下,关键逻辑都在getCheckboxProps里,我们可以根据自己的业务规则,判断当前行的复选框是否需要被禁用:
import { Table } from 'antd'; import type { TableRowSelection } from 'antd'; import { useState } from 'react'; // 完善你的数据接口,记得加key字段,Table的行需要唯一标识 interface DataType { color: string; name: string; key: React.Key; } // 模拟你的数据源 const tableData: DataType[] = [ { key: '1', color: 'red', name: '红苹果' }, { key: '2', color: 'blue', name: '蓝浆果' }, { key: '3', color: 'red', name: '红草莓' }, { key: '4', color: 'blue', name: '蓝风铃' }, ]; export default function SelectControlledTable() { // 已选中行的key集合 const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]); // 选中变化时更新状态 const onSelectChange = (newSelectedRowKeys: React.Key[]) => { setSelectedRowKeys(newSelectedRowKeys); }; // 根据选中的key,筛选出对应的行数据,方便后续判断规则 const selectedRows = tableData.filter(item => selectedRowKeys.includes(item.key)); const rowSelection: TableRowSelection<DataType> = { selectedRowKeys, onChange: onSelectChange, getCheckboxProps: (record) => { // 这里可以自定义你的禁用规则,举个例子: // 如果已选中了任意红色的行,就禁用所有蓝色的行 const hasSelectedRedRow = selectedRows.some(row => row.color === 'red'); // 注意要排除已选中的行,否则已选的行被禁用后无法取消选择 const isCurrentRowSelected = selectedRowKeys.includes(record.key); const shouldDisable = hasSelectedRedRow && record.color === 'blue' && !isCurrentRowSelected; return { disabled: shouldDisable, }; }, }; // 表格列配置 const columns = [ { title: '颜色', dataIndex: 'color', key: 'color' }, { title: '名称', dataIndex: 'name', key: 'name' }, ]; return <Table rowSelection={rowSelection} columns={columns} dataSource={tableData} />; }
你可以根据自己的实际业务需求,修改getCheckboxProps里的shouldDisable逻辑:
比如想实现「选中某一行后,禁用所有和它名称相同的其他行」,可以把判断逻辑改成:
const hasSameNameInSelected = selectedRows.some( row => row.name === record.name && row.key !== record.key ); const shouldDisable = hasSameNameInSelected;再比如「选中行数超过3个时,禁用所有未选中的行」:
const shouldDisable = selectedRowKeys.length >= 3 && !selectedRowKeys.includes(record.key);
核心思路就是:通过getCheckboxProps拿到当前行的record数据,再结合已选中的selectedRowKeys或selectedRows,动态计算当前行复选框的disabled属性。
备注:内容来源于stack exchange,提问作者codesoft




