layui的tabletree擴展組件

2021 年 1 月 30 日
筆記

需求：點擊父級菜單展示子級菜單

難點：某個父級菜單下面有5000條子級菜單（有點坑），當我想把這5000條子級菜單塞到父級菜單下面的時候完蛋了，頁面卡死了…

解決：tabletree這組件我發現用的人是真的少，沒辦法只能硬着頭皮去看這麼low的組件js源碼。下面是解決步驟，希望能幫助到和我遇到一樣困惑的小盆友。

步驟一：下圖一是我頁面上的代碼，思路其實就是先判斷子級菜單的數量，如果子級菜單少於200條的話就直接用組件的obj.async(數組)；把子級菜單數組塞給父級菜單，這個方法會自動局部刷新（還是比較好用的，layui官方文檔沒有講到這個方法，自己開源碼找到的，真坑）；如果子級菜單多於200條的話就把查詢到的子級菜單按200條一批分批塞給父級菜單，這裡還有個小問題，我這一批塞成功後這個obj.async()方法沒有返回值，日了狗了還得看圖二tableTree.js源碼，發現每當這個obj.async()方法執行完後能獲取obj.data.treeList，這樣就有實現思路了，我先定義了一個臨時變量dataList = [],當obj.async()方法執行完一批後給dataList = obj.data.treeList賦值，判斷dataList是否大於0，大於0說明這批數據塞成功了，然後dataList = []賦值空，去塞下一批數據。

圖一：（我本地頁面）