antd的table勾选永远只能选择一条数据
时间: 2024-10-15 09:27:29 浏览: 58
在Ant Design(antd)库中的Table组件中,如果要限制用户一次只能选择一行数据,通常通过自定义列的`onSelect`回调以及状态管理来实现。你可以设置单选模式(`rowSelection={{ type: 'radio' }}`),并在`onSelect`里控制当前选中的行数。
这是一个简单的示例:
```jsx
import { Table } from 'antd';
const columns = [
{
title: '操作',
dataIndex: '',
render: (text, record) => (
<Button type="primary" onClick={() => handleSelect(record)}>{record.key}</Button>
),
selectionAction: {
type: 'checkbox',
// 当前只允许选中一个
onChange: (selectedRowKeys, selectedRows) => {
if (selectedRows.length > 1) {
console.log('只能选择一条数据');
this.setState({ selectedRowKeys: [selectedRowKeys[0]] });
}
},
},
},
];
const handleSelect = (record) => {
// 更新状态,移除已选中的其他行,仅保留当前点击的那一条
const newSelectedKeys = [...this.state.selectedRowKeys];
if (newSelectedKeys.includes(record.key)) return;
newSelectedKeys.splice(newSelectedKeys.indexOf(this.state.selectedRowKeys[0]), 1);
newSelectedKeys.push(record.key);
this.setState({ selectedRowKeys: newSelectedKeys });
};
ReactDOM.render(<Table rowSelection={...} columns={columns} />, document.getElementById('container'));
```
在这个例子中,`onChange`处理函数会检查是否有多于一条的数据被选中,如果有则清除所有选中项并仅保留上一次点击的记录。
阅读全文