React+Antd EditableProTable 实现折叠功能

在 EditableProTable 组件中没有自带的折叠功能。不过，你可以通过自定义列的方式来实现折叠功能。以下是一个实现的示例：

import React, { useState } from 'react';
import { EditableProTable } from '@ant-design/pro-table';

const data = [
  {
    id: 1,
    name: 'John Doe',
    age: 25,
    address: 'New York',
  },
  {
    id: 2,
    name: 'Jane Smith',
    age: 30,
    address: 'London',
  },
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    editable: true,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    editable: true,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    editable: true,
  },
];

const EditableTable = () => {
  const [collapsed, setCollapsed] = useState(false);

  const toggleCollapse = () => {
    setCollapsed(!collapsed);
  };

  return (
    <div>
      <button onClick={toggleCollapse}>
        {collapsed ? 'Expand' : 'Collapse'}
      </button>
      <EditableProTable
        rowKey="id"
        columns={columns}
        dataSource={data}
        style={{ marginTop: 16 }}
        expandable={{
          expandedRowRender: (record) => (
            <div style={{ display: collapsed ? 'none' : 'block' }}>
              <p>{record.name}</p>
              <p>{record.age}</p>
              <p>{record.address}</p>
            </div>
          ),
        }}
      />
    </div>
  );
};

export default EditableTable;

在这个示例中，我们使用了expandable属性来定义展开行的渲染方式。通过点击按钮来控制折叠和展开的状态，并在展开行中显示额外的信息。