Ant-Design-Pro-Components：ProTable组件后台请求实现表格嵌套。

import React, { useRef, useState, Fragment, useEffect } from 'react';
import {
  PlusOutlined,
  PlusCircleTwoTone,
  DeleteTwoTone,
  EditTwoTone,
  EyeTwoTone,
} from '@ant-design/icons';
import { getCodeSelect, getSecondCodeSelect, addDict, updateDict, delDict } from './service';
import { getCodeSelecBytybe } from '@/services/globalServices';
import { ProTable, PageContainer, ModalForm, ProFormText } from '@ant-design/pro-components';
import { Button, Tag, Tooltip, message, Popconfirm } from 'antd';
import { FormattedMessage } from 'umi';
import { twoToneColor } from '@/utils/twoToneColor';
import RightTable from './components/rightTable';
export default () => {
  const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
  };
  const actionRef = useRef(); //外层表格ref
  const actionRef2 = useRef(); //里层表格ref
  const [showModalForm, setShowModalForm] = useState(false); //表单弹窗
  const [currentRow, setCurrentRow] = useState(); // 当前行数据
  const restFormRef = useRef(); // ModalForm组件 ref
  const [codeLists, setCodeLists] = useState([]); //编码类型列表
  const [drawerVisible, handleDrawerVisible] = useState(false); // 查看按钮弹窗
  useEffect(() => {
    getCodeSelecBytybe({ codeType: 'codetype' }).then((res) => {
      if (res && res.success) {
        setCodeLists(res.data);
      } else {
        setCodeLists([]);
      }
    });
  }, []);

  // 外层
  const columns1 = [
    {
      title: '编码类型',
      dataIndex: 'title',
      valueType: 'select',
      align: 'center',
      fieldProps: {
        options: codeLists, //后台取下拉字典的数组
        fieldNames: {
          label: 'codeName',
          value: 'codeValue',
        },
      },
    },

    {
      title: '编码',
      align: 'center',
      dataIndex: 'value',
      search: false,
    },
    {
      title: '编码名称',
      align: 'center',
      dataIndex: 'param1',
      search: false,
    },

    {
      title: '操作',
      align: 'center',
      key: 'option',
      valueType: 'option',
      render: (_, record) => [
        <div key="aan">
          <a
            key="aa"
            onClick={() => {
              setShowModalForm(true);
              setCurrentRow(record);
            }}
          >
            <PlusCircleTwoTone twoToneColor={twoToneColor} />
            添加
          </a>
        </div>,
      ],
    },
  ];

  // 内层
  const columns2 = [
    {
      title: '编码类型',
      dataIndex: 'title',
      align: 'center',
    },

    {
      title: '编码',
      dataIndex: 'value',
      align: 'center',
    },
    {
      title: '编码名称',
      dataIndex: 'param1',
      align: 'center',
    },
    {
      title: '操作',
      align: 'center',
      valueType: 'option',
      render: (_, record) => [
        <div key="aan">
          <a
            onClick={() => {
              setCurrentRow(record);
              handleDrawerVisible(true);
            }}
          >
            <EyeTwoTone twoToneColor={twoToneColor} />
            <FormattedMessage id="pages.searchTable.view" defaultMessage="Configuration" />
          </a>
          <span style={{ marginRight: '10px' }}></span>
          <a
            key="aa"
            onClick={() => {
              setShowModalForm(true);
              setCurrentRow(record);
            }}
          >
            <EditTwoTone twoToneColor={twoToneColor} />
            编辑
          </a>
          <span style={{ marginRight: '10px' }}></span>
          <Fragment>
            <Popconfirm
              title="确定删除该数据?"
              onConfirm={() => {
                deleteConfirm(record);
              }}
              okText="确定"
              cancelText="取消"
            >
              <DeleteTwoTone twoToneColor={twoToneColor} />
              <a key="delete">
                <FormattedMessage id="pages.searchTable.delete" />
              </a>
            </Popconfirm>
            <span style={{ marginRight: '10px' }}></span>
          </Fragment>
        </div>,
      ],
    },
  ];

  // 新增 编辑 数据字典
  const handleAdd = async (fields) => {
    fields.companyCode = 'A86';
    if (!currentRow || currentRow.disabled == true) {
      const hide = message.loading('正在添加');
      try {
        const resa = await addDict({ ...fields });
        hide();
        if (resa.success) {
          if (!currentRow) {
            if (actionRef.current) {
              actionRef.current.reload();
            }
          } else {
            if (actionRef2.current) {
              actionRef2.current.reload();
            }
          }
          message.success('添加成功');
          setCurrentRow(undefined);
          restFormRef.current?.resetFields(); // 清空新增表单
        }
        return true;
      } catch (error) {
        hide();
        message.error('请再次重试!');
        return false;
      }
    } else {
      const data = currentRow;
      // 将表单里的数据，同key覆盖
      Object.keys(fields).map((key) => {
        data[key] = fields[key];
        return data;
      });
      const hide = message.loading('正在修改');
      try {
        const updateR = await updateDict({ ...data });
        hide();
        if (updateR.success) {
          message.success('修改成功');
          if (actionRef2.current) {
            actionRef2.current.reload();
          }
          restFormRef.current?.resetFields(); // 清空新增表单
          setCurrentRow(undefined);
        }
        return true;
      } catch (error) {
        hide();
        message.error('请再次重试!');
        return false;
      }
    }
  };

  // 删除
  const deleteConfirm = async (record) => {
    const resa = await delDict(record.id);
    if (resa && resa.success) {
      message.success('删除成功');
      if (actionRef2.current) {
        actionRef2.current.reload();
      }
    } else {
      message.error('删除失败');
    }
  };

  // 子表格
  const nestDeviceTable = (record) => {
    return (
      <ProTable
        headerTitle=""
        actionRef={actionRef2}
        options={false}
        revalidateOnFocus={false}
        rowKey="id"
        bordered
        columns={columns2}
        search={false}
        params={{ codetype: record.title }}
        request={getSecondCodeSelect}
        pagination={false}
      />
    );
  };

  return (
    <PageContainer
      header={{
        breadcrumb: {},
      }}
    >
      <ProTable
        headerTitle="查询列表"
        options={false}
        columns={columns1}
        actionRef={actionRef}
        revalidateOnFocus={false}
        request={(params) => getCodeSelect({ ...params })}
        rowKey="id"
        bordered
        pagination={{
          pageSize: 10,
        }}
        expandable={{
          expandedRowRender: (record) => nestDeviceTable(record),
        }}
        toolBarRender={() => [
          <Button
            type="primary"
            key="primarynew"
            onClick={() => {
              setCurrentRow(undefined);
              setShowModalForm(true);
            }}
          >
            <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" />
          </Button>,
        ]}
      />

      <ModalForm
        formRef={restFormRef}
        title={currentRow != undefined ? '编辑字典' : '新增字典'}
        {...formItemLayout}
        layout="horizontal"
        grid
        rowProps={{
          gutter: [16, 16],
        }}
        width="600px"
        initialValues={{
          codeType: currentRow?.title,
          codeValue: currentRow?.value,
          codeName: currentRow?.param1,
        }}
        visible={showModalForm}
        onVisibleChange={(bool) => {
          !bool && setCurrentRow(undefined); //清空当前行信息
          setShowModalForm(bool);
          restFormRef.current?.resetFields(); // 清空新增表单
        }}
        onFinish={async (value) => {
          const success = await handleAdd(value);
          if (success) {
            setShowModalForm(false);
          }
        }}
        submitter={{
          searchConfig: {
            resetText: '取消',
          },
          resetButtonProps: {
            onClick: () => {
              restFormRef.current?.resetFields(); // 清空新增表单
              setShowModalForm(false); // 关闭新增弹窗
            },
          },
        }}
      >
        <ProFormText
          label="编码类型"
          rules={[
            {
              required: true,
              message: '请输入编码类型',
            },
          ]}
          width="md"
          name="codeType"
        />
        <ProFormText
          label="编码"
          rules={[
            {
              required: true,
              message: '请输入编码',
            },
          ]}
          width="md"
          name="codeValue"
        />
        <ProFormText
          label="编码名称"
          rules={[
            {
              required: true,
              message: '请输入编码名称',
            },
          ]}
          width="md"
          name="codeName"
        />

        <ProFormText
          label="参数"
          rules={[
            {
              required: false,
              message: <FormattedMessage id="请输入参数" />,
            },
          ]}
          width="md"
          name="param1"
        />
      </ModalForm>

      {drawerVisible ? (
        <RightTable
          currentRow={currentRow}
          setCurrentRow={setCurrentRow}
          drawerVisible={drawerVisible}
          handleDrawerVisible={handleDrawerVisible}
        />
      ) : null}
    </PageContainer>
  );
};