typescript antd protable组件嵌套表格代码

在 TypeScript 中，使用 Ant Design 和 ProTable 来创建嵌套表格的步骤大致如下：

首先，你需要安装必要的库，比如 `antd`, `pro-table` 及其对应的 TypeScript 支持包：

npm install antd pro-table @ant-design/pro-table-procomponents @types/react @types/pro-table

接下来，在项目中创建一个 TypeScript 文件（例如：NestedTable.tsx），并导入所需的模块：

import React from 'react';
import { Table, Tag } from 'antd';
import { Column, ProTable } from '@ant-design/pro-table';
import { NestedRowProps } from '@ant-design/pro-table/lib/components/table/model';

// 如果有自定义嵌套组件，也要引入
import MyCustomComponent from './MyCustomComponent';

然后，定义嵌套数据结构和列配置：

interface NestedData {
  id: string;
  name: string;
  children?: NestedData[];
}

const columns: Array<Column<NestedRowProps, any>> = [
  // 表头配置
  {
    title: 'Name',
    dataIndex: 'name',
    render: (text) => <Tag>{text}</Tag>,
  },
  {
    title: 'Children',
    dataIndex: 'children',
    render: ({ record }) =>
      record.children && (
        <ProTable
          options={{ rowKey: 'id' }}
          dataSource={record.children}
          columns={[
            ...columns, // 将上面的列复制给子表格
            { title: '-', width: 50, render: () => null },
          ]}
        />
      ),
  },
];

最后，创建渲染嵌套表格的组件：

function NestedTable({ data }: { data: NestedData[] }) {
  return (
    <ProTable<{}, any>
      rowKey={(record) => record.id}
      columns={columns}
      data={data}
    />
  );
}

export default NestedTable;