🐛[BUG]EditableProTable中设置getPopupContainer属性无效

[Eileen-v]

🐛 bug 描述

EditableProTable中设置getPopupContainer属性无效，下拉框还是会随页面滚动

🏞 期望结果

将下拉框挂载到table上

💻 复现代码

  <EditableProTable<SYSTEM_ENTITY.EntityTableListItem>
    rowKey="id"
    actionRef={actionRef}
    columns={columns}
    getPopupContainer={(triggerNode: any) => {
      if (triggerNode && triggerNode.parentNode) {
        return triggerNode.parentNode;
      }
      return document.body;
    }}
    request={async () => {
      const data = await entityListByLiterature({
        id: pid,
        existOneEntity: show === null ? true : false,
      });
      // 转换为对象
      const temp: any = {};
      data.data.forEach((v) => {
        return (temp[v.id] = v.entityName);
      });
      onChange(temp);
      return data;
    }}
    editable={{
      type: 'multiple',
      editableKeys,
      onSave: async (_, data) => {
        handleSave(data);
      },
      onChange: setEditableRowKeys,
    }}
  />

© 版本信息

ProComponents 版本: [@2.4.2] umi 版本 [v3.x] 浏览器环境[edge ,google] 开发环境 [window]

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

🌈 解决方案

在ProTable中添加getPopupContainer属性无效，是因为该属性被传递到了内部的组件ProFormItem中，而ProFormItem并没有将getPopupContainer属性传递给antd的组件。

可以使用antd的组件来设置getPopupContainer属性，它可以设置全局的getPopupContainer属性。

import { ConfigProvider } from 'antd';

// 定义一个函数，返回表格的容器
const getPopupContainer = (triggerNode: any) => {
  if (triggerNode && triggerNode.parentNode) {
    return triggerNode.parentNode;
  }
  return document.body;
};

// 内部使用ConfigProvider组件，并将getPopupContainer属性以provider形式传递
// ProTable中的getPopupContainer属性被禁用
<ConfigProvider getPopupContainer={getPopupContainer}>
  <ProTable
    columns={columns}
    dataSource={dataSource}
  />
</ConfigProvider>

📚 文档链接

• Ant Design Pro组件：EditableProTable
• Ant Design官方组件：ConfigProvider

[Eileen-v]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

🌈 解决方案

在ProTable中添加getPopupContainer属性无效，是因为该属性被传递到了内部的组件ProFormItem中，而ProFormItem并没有将getPopupContainer属性传递给antd的组件。

可以使用antd的组件来设置getPopupContainer属性，它可以设置全局的getPopupContainer属性。

import { ConfigProvider } from 'antd';

// 定义一个函数，返回表格的容器
const getPopupContainer = (triggerNode: any) => {
  if (triggerNode && triggerNode.parentNode) {
    return triggerNode.parentNode;
  }
  return document.body;
};

// 内部使用ConfigProvider组件，并将getPopupContainer属性以provider形式传递
// ProTable中的getPopupContainer属性被禁用
<ConfigProvider getPopupContainer={getPopupContainer}>
  <ProTable
    columns={columns}
    dataSource={dataSource}
  />
</ConfigProvider>

📚 文档链接

• Ant Design Pro组件：EditableProTable
• Ant Design官方组件：ConfigProvider

已经解决，非常感谢