zoukankan      html  css  js  c++  java
  • vue中tree组件,递归遍历所有树形节点数据,获取节点的id值

    需求:

    项目需要,tree组件中所有节点要支持一键全部展开,一键全部收起功能。

    如下所示,点击某个按钮,所有的节点全部展开,再次点击,所有节点收起。

    思路很清晰,tree组件中有个 expandedKeys属性,控制展开节点的信息,只要遍历所有的节点信息,把节点的id push到expandedKeys组数中,对应的节点自动会展开。

    那么如何遍历所有树形节点信息,获取每个节点的id呢?

    没有必要为了获取每个节点的id信息,去后端查一下,因为前端已经有了所有树形节点的信息,只不过是按照层级嵌套成树结构而已。

    难点体现在,遍历这样的树形结果,需要递归才行,因为不知道有多少层子节点。

    直接上代码:

    // 递归获取所有节点id
        getAllNodeId (expandedKeys, moduleDataList) {
          for (let i = 0; i < moduleDataList.length; i++) {
            // console.log('i in getAllNodeId: ', i)
            console.log('moduleDataList[i].id  in getAllNodeId: ', moduleDataList[i].id)
            expandedKeys.push(moduleDataList[i].id)
            if (moduleDataList[i].children) {
              expandedKeys = this.getAllNodeId(expandedKeys, moduleDataList[i].children)
            }
          }
          return expandedKeys
        },
        changeOpenAllModuleFolderVisible () {
          console.log('in changeOpenAllModuleFolderVisible')
          this.openAllModuleFolderVisible = !this.openAllModuleFolderVisible
          if (!this.openAllModuleFolderVisible) {
              this.expandedKeys = []
          } else {
            this.expandedKeys = this.getAllNodeId(this.expandedKeys, this.moduleDataList)
          }
          console.log('this.expandedKeys: ', this.expandedKeys)
        }

    getAllNodeId()为递归方法,参数为expandedkeys(存储展开节点的数组),参数moduleDataList是页面中的树形节点数据数组。

    递归思路:

    1、遍历当前数组中每个节点,获取该节点的id

    2、如果该节点子节点不为空,则把当前节点的子节点数据执行第一步操作,把expandedkeys和当前节点的子节点数据传入getAllNodeId()方法; 如果当前节点没有子节点,则继续处理下一个节点

    3、把所有的节点处理完之后,返回expandedkeys,即递归处理所有节点后的结果

    可以用console.log()打印一下处理过程及结果:

  • 相关阅读:
    google
    html页面清除缓存
    EF中使用SQL语句或存储过程
    在存储过程中编写正确的事务处理代码
    .Net中Math.Round与四舍五入
    WebService中实现上传下载文件
    tony_linux下网站压力测试工具webbench
    把Nginx加为系统服务(service nginx start/stop/restart)
    Nginx+Tomcat+Keepalived+Memcache 负载均衡动静分离技术
    python学习笔记(1)--遍历txt文件,正则匹配替换文字
  • 原文地址:https://www.cnblogs.com/xiaxiaoxu/p/14794234.html
Copyright © 2011-2022 走看看