這兩週我在 Vben Admin 上做一張複雜的組織樹狀報表——節點可以展開子層、切換彙總口徑、底部有總計列，資料量大到幾十個父節點、每個下面又有幾十個子節點。

需求看起來沒什麼，實際做起來坑踩了一個又一個。以下是完整記錄。

如果你只是想解決「資料量大、展開卡頓」的效能問題，直接跳到坑 7。 其他坑比較偏向新舊 API 切換踩到的邏輯錯誤，可以視情況選讀。

背景：API 改版，幾乎等於重寫

專案本來有舊版實作，舊版是懶載入——使用者展開哪個節點，才去呼叫 API 拿子資料。

新版 API 改成一次回傳完整樹：

父節點 ├── list[]: 各幣種/細項子資料 └── childList[]: 子組織（每個也有自己的 list[]）

看起來只是資料結構調整，實際上舊邏輯幾乎全部要重寫。

坑 1：查詢完有資料，表格卻空白

console 有資料，表格白白一片。

原因是舊版每個樹節點本身就有明細數值，新版節點本身只有彙總，明細在 node.list[] 裡。原本的 formatData 完全沒處理 list[]，產出來的列全是空殼。

解法是在格式化階段把每個節點的 list[] 展平成子列（加上 __level、parentKey 之類的 meta），掛到節點的 children 下，讓 antdv table 的 tree-data 可以渲染。

坑 2：展開箭頭永遠不出現

旁邊沒箭頭，使用者根本不知道節點可以展開。

舊版靠 hasSub 欄位判斷有沒有子節點；新版 API 把 hasSub 改成回傳 null，判斷邏輯就永遠是 false。