ProTable嵌套表格使用expandedRowRender，怎么实现单选

Question

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

Answer 1

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

在使用Ant Design Pro的ProTable组件实现嵌套表格时，若要实现在expandedRowRender展开行中进行单选操作，你需要确保表单数据项包含一个用于记录选中状态的字段，并且需要在选择逻辑上进行控制以确保任何时候只有一个子行被选中。以下是一个简化的示例代码：

import { ProTable, Table } from '@ant-design/pro-table';

// 假设这是你的数据结构，每个子项都有一个isSelected字段表示是否被选中
const dataSource = [
  {
    key: '1',
    name: '一级行1',
    children: [
      { key: '1-1', name: '二级行1-1', isSelected: false },
      { key: '1-2', name: '二级行1-2', isSelected: false },
    ],
  },
  // ...
];

const handleSelectChange = (record, selected) => {
  // 更新选中的子项
  const updatedDataSource = dataSource.map(item => {
    if (item.key === record.parentKey) {
      return {
        ...item,
        children: item.children.map(child => {
          if (child.key === record.key) {
            return { ...child, isSelected: selected };
          }
          // 当新的项被选中时，取消其他项的选中状态
          if (selected) {
            return { ...child, isSelected: false };
          }
          return child;
        }),
      };
    }
    return item;
  });
  
  // 更新或设置你的数据源（假设有个useState变量叫dataSourceState）
  setDataSourceState(updatedDataSource);
};

// expandedRowRender内定义子表格
const expandedRowRender = (record) => (
  <Table
    rowSelection={{
      type: 'radio',
      onChange: (selectedRowKeys, selectedRows) => {
        handleSelectChange(selectedRows[0], true);
      },
    }}
    columns={[
      { title: '名称', dataIndex: 'name' },
      // 其他列配置...
    ]}
    dataSource={record.children}
  />
);

return (
  <ProTable
    rowKey="key"
    expandable={{ expandedRowRender }}
    columns={[
      { title: '名称', dataIndex: 'name' },
      // 其他列配置...
    ]}
    dataSource={dataSource}
  />
);

这段代码的核心在于handleSelectChange函数，它负责处理子表格中单选框的状态变更。当用户在一个子行上进行选择时，该函数会遍历所有子项并更新其isSelected字段，同时确保只有被选中的项为true，其余项为false。

请注意，上述代码仅作示例参考，实际应用时请根据你的具体数据结构和需求进行调整。