antd中表格怎么实现选择某一行

在 antd 中表格实现选择某一行，可以通过 `rowSelection` 属性来实现。具体步骤如下：

1. 在表格组件中添加 `rowSelection` 属性，如下所示：

<Table rowSelection={{type: 'radio', onSelect: this.handleSelectRow}} columns={columns} dataSource={data} />

2. 在 `rowSelection` 属性中设置 `type` 为 `'radio'`，表示单选模式，也可以设置为 `'checkbox'`，表示多选模式。

3. 在 `rowSelection` 属性中设置 `onSelect` 回调函数，用于处理选中行的操作，例如：

handleSelectRow = (record, selected, selectedRows) => {
  console.log(record); // 当前选中行的数据
  console.log(selected); // 当前选中行是否被选中
  console.log(selectedRows); // 当前选中的所有行数据
}

这样就可以实现选择某一行的功能了。

相关问题

antd中表格单选某一行

在 antd 中，可以通过设置 `rowSelection` 属性来实现表格的单选或多选功能。其中，如果需要实现单选某一行，可以设置 `type` 属性为 `'radio'`，并通过 `onChange` 回调函数获取选中的行数据。

以下是一个示例代码：

import { Table } from 'antd';

const dataSource = [
  { key: '1', name: 'John Doe', age: 32 },
  { key: '2', name: 'Jane Smith', age: 28 },
  { key: '3', name: 'Bob Johnson', age: 45 },
];

const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
];

function handleRowSelection(selectedRowKeys, selectedRows) {
  console.log(selectedRows[0]); // 获取选中的行数据
}

function App() {
  const rowSelection = {
    type: 'radio',
    onChange: handleRowSelection,
  };

  return <Table dataSource={dataSource} columns={columns} rowSelection={rowSelection} />;
}

export default App;

在上面的示例中，我们设置了 `type` 属性为 `'radio'`，并在 `onChange` 回调函数中获取了选中的行数据。这样就可以实现表格的单选某一行功能了。

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;