Antd中怎么实现表格的行单选

Antd 中的表格组件提供了 `rowSelection` 属性，可以实现表格行的单选和多选功能。具体实现步骤如下：

1. 首先在表格组件的 `columns` 属性中添加一个 `checkbox` 列，用来显示选择框。

const columns = [
  {
    title: '',
    dataIndex: 'checkbox',
    render: (_, record) => (
      <Checkbox checked={selectedRowKeys.includes(record.key)} />
    ),
  },
  // 其他列
];

2. 在表格组件的属性中添加 `rowSelection` 属性，并设置 `type` 属性为 `'radio'`。

<Table
  columns={columns}
  dataSource={dataSource}
  rowSelection={{
    type: 'radio',
    selectedRowKeys,
    onChange: onSelectChange,
  }}
/>

其中，`selectedRowKeys` 和 `onSelectChange` 分别是用来控制选中行和处理选中行变化的状态和函数。

完整示例代码如下：

import React, { useState } from 'react';
import { Table, Checkbox } 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: 'checkbox',
    render: (_, record) => (
      <Checkbox checked={selectedRowKeys.includes(record.key)} />
    ),
  },
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

const RowSelectionTable = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const onSelectChange = (selectedRowKeys) => {
    setSelectedRowKeys(selectedRowKeys);
  };

  return (
    <Table
      columns={columns}
      dataSource={dataSource}
      rowSelection={{
        type: 'radio',
        selectedRowKeys,
        onChange: onSelectChange,
      }}
    />
  );
};

export default RowSelectionTable;