vue实现递归

最新推荐文章于 2024-06-04 00:47:15 发布

原创最新推荐文章于 2024-06-04 00:47:15 发布 · 880 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

5 篇文章

订阅专栏

该博客介绍了如何使用Vue处理并转换带有层级结构的数据，构建组织树。通过递归函数getForTree，将数据转化为适用于前端展示的树形结构，便于在页面中渲染组织结构。该方法检查每个对象的children属性，若存在则进行递归处理，否则直接赋值。最后返回处理后的数据，可以直接应用于Vue组件。

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

vue实现递归，类似组织数tree

getForTree(data) {
    data.forEach((item, index) => {
      // 判断对象中是否有children
      if (item.children&& item.children.length > 0) {
        data[index] = {
          title: item.name,
          key: item.id,
          children: item.children,
        }
        // 对children项递归
        this.getForTree(item.children)
      } else {
        //  没有children直接赋值
        data[index] = {
          title: item.name,
          key: item.id,
          children: [],
        }
      }
    })
    return data
 }