“

大家好，我是雄雄，歡迎關注微信公眾號：雄雄的小課堂。

”

前言

項目中，部門數超萬，導致頁面加載價卡頓怎么辦？使用若依自帶解析樹的方法在本地運行沒有任何問題，但是一發布到服務器上就顯示加載超時。

image-20211204221839327

仔細一看，原來是加載時間超過了10秒，所以就超時了，于是，我們就想了個笨辦法，讓客戶多等會兒，把最大超時時間設置成30秒，哈哈哈哈~

但是，這肯定不是個萬全之策，得另想其法。

原因

經過仔細尋找，發現服務器上所有的數據庫都沒了……

然后就開始分析原因，是因為剛剛在創建表的時候失誤刪掉了？也不可能啊，除了手動用工具創建表之外，執行的sql語句也就個select * from 表名啊，不可能會誤刪掉呢。。。

于是我將超時時間設置成30秒之后，果然沒有問題，部門數據在12-13秒左右就加載出來了，但是用戶體驗度極差。

后來經過仔細對代碼分析得出，后臺查詢數據庫1萬條是沒有問題，那時間浪費在哪里呢？浪費在了將接口中返回的數據封裝成樹的方法上了，代碼如下：

image-20211204222519670image-20211204222559860

此處是頁面一進來加載時就查詢所有數據，然后通過調用handleTree，將數據組裝成樹狀展示在表單中。

image-20211204222724100

所以才導致的卡頓。

解決方法

思路就是，先查詢最外面的父節點，也就是全國所有省，目前庫中有38個，然后在點擊前面的展開箭頭時，再去查詢該節點中的子節點，也就是通過懶加載的方式，減輕服務器壓力，從而提升系統的性能。

使用到的vue組件：<treeselect>,html中的代碼如下：

<el-form-item label="歸屬部門" prop="deptId"><treeselectv-model="form.deptId":options="deptOption":load-options="loadOptions"placeholder="請選擇歸屬部門"/></el-form-item>

當然，需要提前在data中聲明deptOption變量，然后在methods中編寫查詢父節點的方法以及懶加載的方法：loadOptions

//所屬部門的樹狀getDeptByAddUser(){listDeptAll(this.paramDeptQuery).then((response)?=>?{let?list?=?[];let?data?=?response.data;data.forEach(element?=>?{element['id']?=?element.deptId;element['label']?=?element.deptName;element['children']?=?null;???//要設置為空，才能觸發:load-options="loadOptions"動用});this.deptOption?=?data;});},//懶加載(點擊小箭頭時顯示的值)loadOptions({?action,?parentNode,?callback?})?{this.paramDeptQuery.parentId?=?parentNode.id;listDeptAll(this.paramDeptQuery).then((response)?=>?{let?data?=?response.data;data.forEach(element?=>?{element['id']?=?element.deptId;element['label']?=?element.deptName;element['children']?=?null;???//要設置為空，才能觸發:load-options="loadOptions"動用});parentNode.children?=?data;callback();});},

最后部署在服務器上，完美解決問題。

總結

別讓困難與懶惰阻止你前進，不嘗試不動手永遠解決不了問題！

總結

以上是生活随笔為你收集整理的树层级处理上万条数据优化！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。