`

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时,需要通过一些编程技巧来实现。本篇...

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

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

    学习Tree控件的例子

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

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

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

    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...

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

    总之,ElementUI的`el-tree`组件提供了一套完整的API来处理树形数据的动态操作。通过熟练掌握这些方法和事件,开发者可以构建出功能丰富的树形组件,满足各种业务场景的需求。在实际开发中,根据具体应用进行适当的...

    VC TREE 控件使用

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

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

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

    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...

    c++树状控件双击修改节点名称

    - 修改节点名称后,虽然控件通常会自动更新显示,但有时可能需要调用`RedrawWindow()`或`Invalidate()`函数来强制界面刷新,确保用户能看到改变。 7. **错误处理**: - 总是处理可能出现的错误情况,如选中项不...

Global site tag (gtag.js) - Google Analytics