EditableProTable的Tab代码

以下是使用Ant Design Pro框架中的EditableProTable组件实现Tab切换的示例代码：

import React, { useState } from 'react';
import { Tabs } from 'antd';
import { EditableProTable } from '@ant-design/pro-table';
const { TabPane } = Tabs;

const EditableTableTabs = () => {
  const [activeKey, setActiveKey] = useState('1');
  const [dataSource1, setDataSource1] = useState([]);
  const [dataSource2, setDataSource2] = useState([]);

  const handleTabChange = (key) => {
    setActiveKey(key);
  };

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

  return (
    <Tabs activeKey={activeKey} onChange={handleTabChange}>
      <TabPane tab="Tab 1" key="1">
        <EditableProTable
          rowKey="id"
          columns={columns}
          value={dataSource1}
          onChange={setDataSource1}
          editable={{
            type: 'single',
          }}
        />
      </TabPane>
      <TabPane tab="Tab 2" key="2">
        <EditableProTable
          rowKey="id"
          columns={columns}
          value={dataSource2}
          onChange={setDataSource2}
          editable={{
            type: 'single',
          }}
        />
      </TabPane>
    </Tabs>
  );
};

export default EditableTableTabs;

在这个示例中，我们使用了Ant Design Pro框架中的Tabs组件来实现Tab切换，每个Tab下面都使用了EditableProTable组件来展示可编辑的表格数据。在handleTabChange函数中，我们使用useState来更新当前选中的Tab key，然后在Tabs组件中使用activeKey来指定当前选中的Tab。每个EditableProTable组件都使用了不同的dataSource和onChange函数来存储和更新不同Tab下的表格数据。