ElementUI Tree control dynamically refreshes nodes

1. Name the tree in the page, such as
<el-tree ref="ftree"
   :data="mytree"
   :props="defaultProps"
   node-key="id"
   :render-content="renderContent">
</el-tree>

2. Get the tree object through refs in the method
var tree = this.$refs.ftree

3. Find the node according to the key, and then modify the children array
refreshContent: function(tree, id){
    for(var i=0; i<tree.children.length; i++) {
        if(tree.children[i]["id"] == id){
            tree.children[i]["name"] = "Content to be modified";
            var value = tree.children[i];
            tree.children.splice(i, 1, value);
            return true;
        } else if(tree.children[i].children != null && tree.children[i].children.length > 0){
            var flag = this.refreshContent(tree.children[i], id);
            if(flag){
                // If it is not updated layer by layer, the interface content will not be refreshed
                var value = tree.children[i];
                tree.splice(i, 1, value);
                return true;
            }
        }
    }
}

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=326325452&siteId=291194637