Vue tree树状结构数据转扁平数据

javascript 复制代码
//数据结构可参考饿了么UI
 treeData: [{
        id: 1,
        label: 'Level one 1',
        type: 1,
        children: [{
          id: 4,
          label: 'Level two 1-1',
          type: 2,
          children: [{
            id: 9,
            label: 'Level three 1-1-1',
            type: 3
          }, {
            id: 10,
            label: 'Level three 1-1-2',
            type: 3
          }]
        }, {
          id: 11,
          label: 'Level three 1-2',
          type: 2,
          children: [{
            id: 12,
            label: 'Level three 1-2-1',
            type: 3
          }, {
            id: 13,
            label: 'Level three 1-2-2',
            type: 3
          }, {
            id: 14,
            label: 'Level three 1-2-3',
            type: 3
          }, {
            id: 15,
            label: 'Level three 1-2-4',
            type: 3
          }]
        }]
      }]
javascript 复制代码
//转结构(list就是你要转的树状数据)
 treeToList(list) {
      let res = []
      for (const item of list) {
        const { children, ...i } = item
        if (children && children.length) {
          res = res.concat(this.treeToList(children))
        }
        res.push(i)
      }
      return res
    }
//查看数据是否转换成功
  const treeList = this.treeToList(this.treeData)
  console.log('树状结构转扁平结构', treeList)   

参考文档Vue tree树状结构数据转扁平数据_vue树形结构转化为平行结构-CSDN博客

相关推荐
星光开发者11 分钟前
基于Spring Boot的充电桩管理系统的设计与实现-计算机毕设【课程设计】57105
vue.js·spring boot·vscode·mysql·django·php·express
梦曦i20 分钟前
uni-app x 0.7.0重磅升级:插件实例化,原生编译彻底打通
前端·uni-app x
开开心心就好28 分钟前
C盘空间不够用?一键扫描清理系统垃圾
前端·javascript·安全·支持向量机·语音识别·etcd·模拟退火算法
爱喝水的小周31 分钟前
实验八 Vue‑Router 路由插件实践
前端·javascript
ℋᙚᵐⁱᒻᵉ鲸落40 分钟前
ETypeError: nameRef.value?.focus is not a functio. 设置el-input自动聚焦时报错
前端·javascript·vue.js·elementui
JavaGuide42 分钟前
为什么越来越多人放弃 Claude Code 转而用 Pi?
前端·后端
SEO_juper1 小时前
2026年用Python检查多语言站点hreflang:自动揪出“回链缺失/标错语言“等致命错误(附完整代码)
开发语言·前端·seo·独立站·谷歌优化
+VX:Fegn089510 小时前
计算机毕业设计|基于springboot + vue蛋糕店管理系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·课程设计
半个落月10 小时前
LangChain.js Agent Memory 实战(下):用 Milvus 构建可检索的长期记忆
javascript·langchain
半个落月10 小时前
LangChain.js Agent Memory 实战(上):从内存对话、文件持久化到截断与摘要
javascript·langchain