antd中table有一列时checkbox,如果有一个checkbox被勾选,则其他的checkbox禁止选择,当被勾选的取消,其他checkbox可以被选择
时间: 2024-10-16 09:13:59 浏览: 51
在 Ant Design (AntD) 的 Table 组件中,如果你想要实现这样的功能,可以利用表单控件的联动控制以及数组操作来达到效果。这里我们可以创建一个自定义列组件,包含一个 Checkbox 和一个状态管理变量。以下是一个简单的示例:
首先,引入必要的依赖:
```jsx
import { FormItem, Table, Input, Checkbox } from 'antd';
const { Column } = Table;
const { CheckboxGroup } = Form.Item;
```
然后创建一个自定义的复选框列:
```jsx
const CustomCheckboxColumn = ({ dataIndex, title, data, checkboxCheckedKeys, onCheck }) => {
const handleChange = (checkedKeys) => {
if (checkedKeys.length > 0) {
// 如果有至少一个被勾选,设置所有其他复选框为不可选
checkedKeys.forEach((key) => !data[key].selected && onCheck(key));
// 只保留当前被勾选的键
const filteredKeys = checkedKeys.filter((k) => data[k].selected);
checkboxCheckedKeys.set(filteredKeys);
} else {
// 没有任何被勾选,恢复默认状态
checkboxCheckedKeys.reset();
}
};
return (
<FormItem label={title}>
<CheckboxGroup value={checkboxCheckedKeys.get(dataIndex)} onChange={handleChange}>
{data.map((item, index) => (
<Checkbox key={index} value={index} checked={item.selected}>
{item.label}
</Checkbox>
))}
</CheckboxGroup>
</FormItem>
);
};
```
现在,你可以在 Table 中使用这个自定义列:
```jsx
const columns = [
// ...其他列...
{
title: 'Action',
render: () => (
<CustomCheckboxColumn
dataIndex="id"
title="Select"
data={rows}
checkboxCheckedKeys={refetchCheckedKeys}
onCheck={(key) => handleCheck(key)}
/>
),
},
];
// ...其他表格配置...
```
在这个例子中,`onCheck` 函数用于外部处理被选中的行,而 `checkboxCheckedKeys` 可能是一个 `Ref` 对象,用于存储当前被选中的行。当你需要获取或者更新被选中的行时,可以访问这个 `Ref` 的值。
阅读全文