怎么实现单机表格的某一行实现单选
时间: 2024-03-03 19:49:59 浏览: 56
Repeater实现RadioButton单选功能
实现表格的行单选可以通过以下步骤:
1. 定义 `selectedRowKeys` 状态,用于记录选中的行的 `key` 值。
```
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
```
2. 在表格组件的 `rowSelection` 属性中设置 `selectedRowKeys` 和 `onChange` 属性,用于处理选中行的状态和变化。
```
<Table
dataSource={dataSource}
columns={columns}
rowSelection={{
type: 'radio',
selectedRowKeys,
onChange: (selectedKeys, selectedRows) => {
setSelectedRowKeys(selectedKeys);
},
}}
/>
```
其中,`type` 属性设置为 `'radio'`,表示单选;`selectedRowKeys` 属性为选中的行的 `key` 值数组;`onChange` 属性为选中行的回调函数,当选中行发生变化时,会触发该函数,更新 `selectedRowKeys` 状态。
3. 在表格的每一行中设置 `rowKey` 属性为该行数据的唯一标识,用于记录选中行的 `key` 值。
```
<Table
dataSource={dataSource}
columns={columns}
rowSelection={{
type: 'radio',
selectedRowKeys,
onChange: (selectedKeys, selectedRows) => {
setSelectedRowKeys(selectedKeys);
},
}}
>
<Table.Column title="姓名" dataIndex="name" rowKey="name" />
<Table.Column title="年龄" dataIndex="age" rowKey="age" />
<Table.Column title="地址" dataIndex="address" rowKey="address" />
</Table>
```
完整的示例代码如下:
```
import React, { useState } from 'react';
import { Table } from 'antd';
const dataSource = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
];
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '地址',
dataIndex: 'address',
key: 'address',
},
];
const RowSelectionTable = () => {
const [selectedRowKeys, setSelectedRowKeys] = useState([]);
return (
<Table
dataSource={dataSource}
columns={columns}
rowSelection={{
type: 'radio',
selectedRowKeys,
onChange: (selectedKeys, selectedRows) => {
setSelectedRowKeys(selectedKeys);
},
}}
>
<Table.Column title="姓名" dataIndex="name" rowKey="name" />
<Table.Column title="年龄" dataIndex="age" rowKey="age" />
<Table.Column title="地址" dataIndex="address" rowKey="address" />
</Table>
);
};
export default RowSelectionTable;
```
阅读全文