ElementUI Tree控件动态刷新节点

最新推荐文章于 2024-12-04 09:25:44 发布

原创最新推荐文章于 2024-12-04 09:25:44 发布 · 1.1w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ui #java #ViewUI

elementUI 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Element UI框架中使用树形组件，并通过具体步骤演示如何动态更新树节点内容。首先，需要为树组件指定唯一引用名称，然后利用Vue的refs特性获取树对象，最后通过递归函数定位特定节点并更新其子节点内容。

1、在页面中为tree命名，如


<el-tree ref="ftree"
   :data="mytree"
   :props="defaultProps"
   node-key="id"
   :render-content="renderContent">
</el-tree>

2、在方法中通过refs获取tree对象

var tree = this.$refs.ftree

3、根据key查找节点，然后修改children数组


refreshContent: function(tree, id){
    for(var i=0; i<tree.children.length; i++) {
        if(tree.children[i]["id"] == id){
            tree.children[i]["name"] = "要修改的内容";
            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){
                // 如果不逐层更新，界面内容不会刷新
                var value = tree.children[i];
                tree.splice(i, 1, value);
                return true;
            }
        }
    }
}