vue實現table表格樹結構-使用懶加載時-解決子節點增刪改后，不刷新子節點數據問題

借鑒博客：https://blog.csdn.net/weixin_43953518/article/details/105557934

 

一、在使用element-ui的table組件時，使用樹形結構，並使用了懶加載，可出現了一個問題，在對當前節點添加一個子節點數據，或刪除一個子節點數據時，當前節點的子節點數據並不自動刷新出來。element-ui官方沒有提供實時刷新子節點數據的方法。

 

 

 

　　解決辦法：

　　　　1、可以使用window.location.reload();但每次加減一個子節點數據，整個頁面都刷新一下實在太不好看。而且節點會自動折疊恢復剛進此頁面時的樣子。

 

　　　　2、第二種，用下面的代碼，可以在添加完子節點操作后，收起所有的節點（不展開）：

this.$set(this.$refs.table1.store.states, "lazyTreeNodeMap", {});
this.$set(this.$refs.table1.store.states, "treeData", {});

 

 

　　　　3、最好的解決辦法就是：找到了打開子節點數據懶加載時，更新數據的關鍵：this.$set(lazyTreeNodeMap, key, data);

lazyTreeNodeMap: 就是this.$refs.table.store.states.lazyTreeNodeMap

key：就是table-key，相當於父節點數據的id

data：就是子節點數據

 

　　　　怎么使用，關鍵代碼：

this.$set(this.$refs.table1.store.states.lazyTreeNodeMap, xxxList);

業務使用場景：
　　1、先給table標簽添加一個ref="table1"
　　2、在點擊父節點要添加一個子節點，或刪除一個子節點后，已請求完后台接口后，拿到父節點id，和最新增刪后的子節點數據xxxList

　　3、最后調用 this.$set(this.$refs.table1.store.states.lazyTreeNodeMap, id, xxxList);//根據父節點id更新子節點數據

 

　　　　

我的業務處理場景：

　　1、table標簽添加ref="table1"

 

 

 

　　2、寫一個refreshRow(row)的方法：新增、刪除子節點后調用此方法更新子節點數據

 

 

refreshRow(){//=====================在添加、刪除、修改子節點后更新懶加載父節點方法。
         //this.refreshParentRow為操作的父節點對象數據，

     //根據父節點id獲取子節點數據請求
     this.$http.post('/menuController/queryMenuList', this.refreshParentRow).then(res => {
          console.log(res);
          if(res){
             this.$set(this.$refs.table1.store.states.lazyTreeNodeMap, this.refreshParentRow.id, res.data.dataMap.menuListPage.list)
          }else{
             this.$message({
                message: '獲取菜子節點單數據列表list接口錯誤',
                type: 'fail'
             });
          }

     }).catch((error) => {
          alert(error)

      });


},

 

 

　　如果報錯：報內存溢出，錯誤又正好在：this.$set(this.$refs.table1.store.states.lazyTreeNodeMap, this.refreshParentRow.id, res.data.dataMap.menuListPage.list); 

這條代碼上，那原因就是我res.data.dataMap.menuListPage.list中的數據有問題，接口返回了查詢了錯誤的子節點數據，明明當前節點下的所有子節點只有2條，卻查出了10多條，所以報內存溢出。

　　　　修改后端bug后，查出正確的子節點list，刷新子節點就沒問題了

 

 

 

 

 

 

 

 

 

 

 

 

 

。