antd的table中有一列是否默认是checkbox,限制永远只能勾选一条
时间: 2024-10-16 09:04:47 浏览: 38
在Ant Design (antd) 的 Table 组件中,如果你想设置一列作为复选框,并且默认只允许用户选择一行,你可以使用 `Table` 的 `rowSelection` 属性。这个属性提供了一种方便的方式来控制表格的行选择功能。
`rowSelection` 可以是一个对象,包含以下几个关键字段:
1. `selectedRowKeys`: 默认只有空数组,表示没有选中行。你可以在这里添加、删除或更新键值对来记录已选择的行。
2. ` onChange`: 当用户选择或取消选择行时触发的函数,传入新的选中行键数组。
3. `selectionMode`: 表示选择模式,通常设为 `'radio'` 来限制用户每次只能选择一行。
下面是一个例子:
```jsx
import { Table } from 'antd';
const columns = [
// ...
{
type: 'selection',
dataIndex: 'select', // 这里假设有一个名为 'select' 的列用于复选框
width: 48,
render: ({ selected }) => (
<span>
{'{'}[{selected}]{'} '}
<i className="ant-checkbox"></i>
</span>
),
},
// ...
];
const rowSelection = {
selectedRowKeys: ['0'], // 如果默认选中第一行,就设置为 '0'
onChange: (selectedRowKeys) => {
console.log('selectedRowKeys changed to ', selectedRowKeys);
// 在这里可以进一步操作,比如清空其他选中的行
if (selectedRowKeys.length > 1) {
selectedRowKeys.splice(1); // 只保留第一个
}
},
mode: 'radio',
};
function CustomTable() {
return <Table columns={columns} rowSelection={rowSelection} />;
}
// 使用 CustomTable 组件
```
在这个例子中,当用户选择第二行时,`onChange` 函数会被调用,如果新选择的行数超过1,就会移除多余的选中项,保持默认只有一行被选中的状态。
阅读全文