👑 [需求] ProTable 使用 request 请求数据，高度变化2次，能否和用 dataSource 保持一致，只变化一次。

[zhengmenghuang]

🔩 所属模块或组件

ProTable

🥰 需求描述

当使用 antd 或者 ProTable 用 dataSource 填充数据时，表格高度只会从空数据 到 有数据，变化一次。
期待示例：https://codesandbox.io/p/devbox/ji-ben-yong-fa-antd-6-1-1-forked-925qvp?workspaceId=ws_FYZ4rBoQhv5Mwjevt1zFM4

但是当 使用 request 请求数据时，表格高度会从空数据 到 loading 再到有数据，变化俩次。这样的话，页面会有闪烁感。
复现示例：https://codesandbox.io/p/devbox/ji-ben-yong-fa-antd-6-1-1-forked-f7ms7w?workspaceId=ws_FYZ4rBoQhv5Mwjevt1zFM4

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!

[dosubot]

Hi @zhengmenghuang! I'm Dosu and I’m helping the pro-components team.

ProTable 在使用 request 异步加载数据时，内部的 useFetchData 会先渲染空数据（高度较小），然后进入 loading 状态（显示 loading 占位，表格高度变化），最后数据返回再渲染数据（高度再次变化），所以会有两次高度变化和闪烁现象。这是因为 loading 状态和数据状态是分开管理的，Ant Design Table 的 loading 占位会影响高度相关源码。

用 dataSource 直接渲染时，没有 loading 过程，只有一次高度变化（空 → 有数据），所以体验更平滑。

目前没有官方参数可以让 request 模式下只变化一次高度，但有几个常用的优化方案：

1. 设置 defaultData={[]}
   这样可以让表格在 loading 时结构保持一致，减少闪烁（表头会一直在）。这是官方推荐的做法之一参考。

2. 手动管理 loading 和数据
   不用 request，自己用 useEffect 拉数据，然后用 dataSource 和 loading 控制 ProTable，这样只会有一次高度变化。示例代码：

   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(false);
   
   useEffect(() => {
     setLoading(true);
     fetch('/api/data').then(res => res.json()).then(res => {
       setData(res);
       setLoading(false);
     });
   }, []);
   
   <ProTable dataSource={data} loading={loading} ... />

3. 自定义 loading 占位或用 CSS 固定表格最小高度
   比如给表格外层加个 min-height，避免 loading 时高度塌陷。

这些方案各有权衡：用 request 会有两次高度变化但自动处理分页、筛选等；用 dataSource 需要自己处理数据和 loading，但可以完全控制渲染时机和高度变化。

如果你需要更平滑的体验，建议用 dataSource + loading 手动管理，或者用 defaultData 保持表格结构一致，能显著减少闪烁。

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[zhengmenghuang]

方案1 设置 defaultData={[]} 可以解决我的问题。

[Wxh16144]

tql，既然全部链路都走完了，可以顺手提交一个 PR？ 看看社区其他人反馈

[zhengmenghuang]

问题已解决