ProTable嵌套表格怎么实现单选

Question

ProTable嵌套表格怎么实现单选
目前的情况是可以选中两个

Answer 1

引自免费微信小程序：皆我百晓生

在Ant Design Pro的ProTable中实现嵌套表格单选，可以通过以下方式实现：

1. 首先，在数据结构层面，确保你的子表格数据项中包含一个用于标识是否被选中的字段，例如selected。

2. 在子表格组件（通常是render列）中添加Radio单选框，并通过onChange事件处理函数更新对应行的数据，使其选中状态改变。

import { Radio } from 'antd';
import ProTable from '@ant-design/pro-table';

// 假设这是你的数据结构，其中包含了子表格数据
const dataSource = [
  {
    key: '1',
    name: 'Parent 1',
    children: [
      { key: '1-1', name: 'Child 1-1', selected: false },
      { key: '1-2', name: 'Child 1-2', selected: false },
    ],
  },
  // ...
];

// 子表格的渲染方法
const renderSubTable = (subData) => (
  <ProTable
    rowKey="key"
    columns={[
      {
        title: '名称',
        dataIndex: 'name',
        render: (_, record) => (
          <Radio 
            checked={record.selected}
            onChange={() => handleSelect(record.key)}
          >
            {record.name}
          </Radio>
        ),
      },
      // 其他列...
    ]}
    dataSource={subData}
    pagination={false}
  />
);

// 单选处理函数
const handleSelect = (key) => {
  // 这里你需要根据实际情况更新数据源，将当前选中的子项设置为selected=true，其他子项为false
  const updatedDataSource = dataSource.map(item => ({
    ...item,
    children: item.children.map(child =>
      child.key === key ? { ...child, selected: true } : { ...child, selected: false }
    )
  }));
  
  // 更新到你的state或props中
  setDataSource(updatedDataSource);
};

return (
  <ProTable
    rowKey="key"
    columns={[
      // 主表格的其他列...
      {
        title: '子表格',
        dataIndex: 'children',
        render: (children) => renderSubTable(children),
      },
    ]}
    dataSource={dataSource}
  />
);

以上代码示例仅供参考，实际应用时请根据你的项目需求进行调整。核心思路是利用Radio组件的onChange事件来同步更新数据源中对应的选中状态，并在渲染时依据这个状态显示选中与否。