`

ElementUI Tree控件动态刷新节点

 
阅读更多
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;
            }
        }
    }
}
分享到:
评论

相关推荐

    vue elementUI tree树形控件获取父节点ID的实例

    在使用Vue.js框架结合Element UI库构建网页时,树形控件(Tree)是一个常用的组件,它能很好地展示层级化数据。当我们需要在Element UI的Tree组件中获取被选中节点的父节点ID时,需要通过一些编程技巧来实现。本篇...

    ElementUI Tree 树形控件的使用并给节点添加图标

    在本文中,我们将探讨如何在Vue项目中使用ElementUI Tree控件并添加自定义图标。 首先,让我们了解如何实现数据渲染。在Vue实例的`data`对象中,我们需要声明一个名为`list`的变量,用于存储从后台获取的数据。这些...

    Element的el-tree控件后台数据结构的生成以及方法的抽取

    最近用到了el-tree控件,主要是数据的格式,按照官网的数据格式来就可以显示节点的树形结构了。 代码参考很多 这里给出一个比较好的链接:https://www.jb51.net/article/181990.htm 代码说明在注释里写的很详细...

    Element-ui el-tree新增和删除节点后如何刷新tree的实例

    2. **刷新节点状态**:为了让`el-tree`组件知道有新节点需要加载,我们需要设置节点的`loaded`属性为`false`,表示该节点的数据未加载。接着,通过调用`node.expand()`方法,触发节点的加载请求,从而更新视图。 ``...

    学习Tree控件的例子

    通过查看这些文件,我们可以更具体地了解如何实现Tree控件的动态加载数据、节点的增删改查以及数据库交互等功能。 总结起来,这个例子主要涵盖了以下几个知识点: 1. Tree控件的创建和操作,包括MFC中的CTreeCtrl类...

    elementUI Tree 树形控件的官方使用文档

    ElementUI Tree 树形控件是前端开发中常用的一种组件,它用于展示具有层次结构的数据,通常被用来表示目录、组织架构或者有嵌套关系的信息。这个组件允许用户展开或折叠节点,以便更好地管理和查看数据。在本文中,...

    多彩的自绘Tree控件

    在标准的Tree控件中,节点通常显示为文本,而自绘Tree控件则超越了这一限制,允许开发者使用自定义的图形元素来呈现节点,例如,可以设置背景图片、图标、颜色等,使得界面更加个性化和多彩。 实现自绘Tree控件的...

    Element-ui tree组件自定义节点使用方法代码详解

    通过实例代码的剖析,我们可以看到自定义节点不仅能够控制内容显示,还可以在Tree组件中实现节点的拖拽、置顶等功能,这为构建更复杂的用户界面提供了极大的灵活性和强大的功能支持。在实际开发过程中,应当根据业务...

    selectTree tree控件 日历控件 tree控件 radio CheckBox demo

    "selectTree tree控件 日历控件 tree控件 radio CheckBox demo"这个标题揭示了几个关键的组件,它们是网页交互中的重要元素。下面将详细介绍这些控件及其应用场景。 1. **selectTree(选择树控件)**: 选择树控件...

    Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作

    需求: vue-cli项目树形控件:一级节点为本地节点,默认展开一级节点,增删改后局部刷新数据。 增加节点,点击确定后局部刷新,渲染新数据。 源码 element组件样式 &lt;el-tree class="treeitems" :data="data...

    layui-tree实现Ajax异步请求后动态添加节点的方法

    需要注意的是,为了实现动态添加节点,layui.tree 组件可能需要支持动态加载或自定义渲染功能。这意味着在初始渲染树形结构时,可能需要设置 `expand` 参数以允许后续的节点添加和展开。 总结来说,这个示例展示了...

    VC TREE 控件使用

    7. **遍历节点**:使用`GetNextItem`系列函数(如`GetNextSiblingItem`、`GetFirstChildItem`等)可以遍历TREE控件的所有节点。 8. **拖放操作**:如果你需要支持节点的拖放功能,可以启用控件的拖放特性,并实现...

    tree 控件,多语言支持

    Tree控件需要根据当前语言的规则对节点进行排序。 4. **日期和数字格式**:除了文本,日期和数字也需要按照当地习惯进行格式化。例如,美国的日期格式是MM/DD/YYYY,而欧洲可能是DD/MM/YYYY。 5. **右到左布局**:...

    VC++ TREE控件使用实例大全

    6. **目录树控件**:`CDirTreeCtrl_src`和`DirTreeCtrl_demo`可能提供了实现文件系统目录树的示例,通过遍历文件系统,动态加载和更新TREE控件,展示文件夹和文件的层级关系。 7. **拖放功能**:通过实现DRAG&DROP...

    Tab+Tree控件联合使用

    通过插入、删除、修改节点,以及处理各种通知消息,可以实现对Tree控件的动态管理。 将Tab控件和Tree控件联合使用,可以构建出更复杂的用户界面。例如,我们可以创建一个Tab控件,每个选项卡都包含一个独立的Tree...

    ElementUI中el-tree节点的操作的实现

    其实tree的有些方法用起来是很方便的, this.$refs.tree.getCheckedKeys();这个原生态的方法。官方文档上说的是,返回一个数组。有了这个方法,我们就可以得到选中的每个节点的id,拿到了id,那所有的问题就...

    vc Tree控件使用源码

    在VC++编程环境中,"vc Tree控件"指的是MFC(Microsoft Foundation Classes)库中的CTreeCtrl类,它是Windows API中的TreeView控件的封装。这个控件常用于创建树状结构,显示层次化的数据,例如文件系统目录或应用...

Global site tag (gtag.js) - Google Analytics