How to solve the pit of tree control in ElementUI

This article mainly explains "how to solve the pit of tree control in ElementUI". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to solve the pit of tree control in ElementUI".

In a word, it is very good and strong. But the loading of the tree in ElementUI can be loaded lazily through the load attribute, which is used in official cases. It is very troublesome to personally do not recommend this usage, and it is very troublesome to delete and modify nodes dynamically. I used this at the beginning, and later found that dynamically adding nodes, deleting nodes, and node filtering are all very troublesome, and then change the way of thinking, using data, all the problems are solved at once. The idea of using data is as follows: use the data attribute to load data in tree, and later all things related to node dynamic addition and deletion, we only need to operate data, which is also in line with the idea of data-driven view.

1. When the page is loaded, I get all the department data in the mounted method, and then load it directly into the tree (this way is more convenient, especially when dealing with dynamic additions and deletions later, and partners can choose the appropriate strategy according to the actual situation in their work). The core code is as follows:

This.getRequest ("/ system/basic/dep/-1") .then (resp= > {_ this.treeLoading = false; if (resp & & resp.status = = 200) {_ this.treeData = resp.data;}})

two。 When adding a node, when the server is successfully added, it will return the json of the node you just added, and find the location of the json through recursion, and dynamically go to the tree. The recursive process is as follows:

SetDataToTree (treeData,pId,respData) {for (var itemo witi)