iview 获取Tree 数据

最新推荐文章于 2025-06-10 19:00:01 发布

qq_40775395

最新推荐文章于 2025-06-10 19:00:01 发布

阅读量513

点赞数

CC 4.0 BY-SA版权

文章标签：前端 web ui vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_40775395/article/details/123255327

本文介绍了一种方法来处理包含children属性的Tree数据，通过递归遍历将数据转换为新的格式。内容涉及JavaScript编程，数据结构处理，特别是针对前端开发中的数据操作，展示了如何通过数据处理方法dataHandle实现数据转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<Tree ref="projectTreeView" :data="treeData" :render="renderContent"></Tree>

Tree数据全部保存data中，即:data="treeData"中，要获取它的数据，直接遍历递归出来即可。

数据格式如下：

--------------------------------------

实现思路：写一个递归方法，蒋需要的数据存入新集合中即可

let treeData = this.treeData

const arr = this.dataHandle(treeData)

方法如下：

dataHandle(data) {
        const arr = [];
        let obj = {};
        data.forEach(router => {
          const tmp = {...router};
          if (tmp.children) {
            tmp.children = this.dataHandle(tmp.children);
            obj = {
              name: tmp.title,
              children: tmp.children
            }
          } else {
            obj = {
              name: tmp.title,
              children: null
            }
          }
          arr.push(obj);
        })
        return arr;


      },

------------------------

打印结果