react中table某一列是checkbox,选中一个checkbox其他的就禁止选择,取消选择checkbox,其他的可以选择
时间: 2024-10-16 18:22:35 浏览: 32
checkbox:React复选框
在React中,要实现这样一个功能,通常会使用Ant Design库的Table组件配合Form组件的Checkbox。这里是一个简单的例子,假设有一个数组`selectedKeys`存储已选中的键值,`allData`是你的表格数据源:
```jsx
import React, { useState } from 'react';
import { Table, Input, Button, Checkbox } from 'antd';
const { Column } = Table;
function MyTable() {
const [selectedKeys, setSelectedKeys] = useState([]); // 存储选中的行
const [allData, setAllData] = useState([
// 你的表格数据
]);
const handleChange = (key) => {
// 如果新的选中项不在已选中列表中,追加;反之移除
const newSelectedKeys = [...selectedKeys].includes(key) ? selectedKeys.filter((k) => k !== key) : [...selectedKeys, key];
// 更新状态并且阻止其他checkbox的选择或取消
setSelectedKeys(newSelectedKeys);
allData.forEach((item, index) => {
item.isSelectable = newSelectedKeys.includes(item.key);
});
// 如果只想单选,可以在这判断并更新所有项的状态
if (newSelectedKeys.length === 1) {
// 例如这里设置所有其他项不可选
allData.forEach((item, index) => {
if (!item.isSelectable) {
item.isSelectable = false;
}
});
}
};
// 渲染表头
const columns = [
{
title: '操作',
key: 'action',
render: (text, record) => (
<Space size="middle">
<Checkbox
defaultChecked={selectedKeys.includes(record.key)}
onChange={() => handleChange(record.key)}
disabled={!record.isSelectable} // 只有当isSelectable为true时才允许选择
/>
</Space>
),
},
// 其他列...
];
return (
<Table
columns={columns}
dataSource={allData.map((item) => ({
...item,
isSelectable: selectedKeys.includes(item.key), // 初始化isSelectable字段,取决于是否已被选中
}))}
rowKey={(item) => item.key}
onCheck={(keys) => setSelectedKeys(keys)} // 用于处理全选/全不选操作
/>
);
}
export default MyTable;
```
在上面的代码中,我们在`<Table>`组件中处理了`onCheck`事件,以及在每一行渲染了一个`Checkbox`,通过`disabled`属性来限制其选中状态。当用户更改某一行的`Checkbox`时,`handleChange`函数会被触发,更新`selectedKeys`和`allData`数组,确保其他行的`isSelectable`属性与当前选中情况一致。
注意,这只是一个基础示例,实际应用可能需要根据具体的数据模型和业务逻辑进行适当的调整。
阅读全文