Vue realizes table tree structure - when using lazy loading - solves the problem of not refreshing child node data after adding, deleting and modifying child nodes

problem discovery

When using element-ui's table component, using a tree structure and using lazy loading, there is a problem. When adding a child node data to the current node, or deleting a child node data, the child node of the current node Data is not automatically refreshed. element-ui officially does not provide a method to refresh child node data in real time.

problem solved

I use the third solution

1. You can use window.location.reload(); but every time a child node data is added or subtracted, it is too ugly to refresh the entire page. And the nodes will automatically collapse and restore the appearance when they first entered this page.

2. The second way, with the following code, you can collapse all nodes (do not expand) after adding child nodes:

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

3. The best solution is to find the key to update data when opening child node data lazy loading:

   this.$set(lazyTreeNodeMap, key, data);
   lazyTreeNodeMap: 就是this.$refs.table.store.states.lazyTreeNodeMap
   
   key：就是table-key，相当于父节点数据的id
   data：就是子节点数据
   

   How to use, key code:

   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更新子节点数据
   

My business processing scenario:

1. Add ref="table1" to the table tag

   

2. Write a refreshRow(row) method: call this method to update child node data after adding or deleting child nodes

   

   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)
   
         });
   
   },
   

exception handling

If an error is reported: memory overflow is reported, and the error happens to be: this.set $set(this.$refs.table1.store.states.lazyTreeNodeMap, this.refreshParentRow.id, res.data.dataMap.menuListPage.list);

In this code, the reason is that there is a problem with the data in my res.data.dataMap.menuListPage.list. The interface returns the wrong child node data. Obviously there are only 2 child nodes under the current node, but it is found There are more than 10 entries, so memory overflow is reported.

After modifying the back-end bug, find out the correct list of child nodes, and refresh the child nodes will be no problem