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博客

相关推荐
2401_840759769 小时前
2026年前端框架生态与AI开发新趋势
前端·人工智能·科技
i220818 Faiz Ul9 小时前
药店管理|基于springboot + vue药店管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·美食分享系统
研☆香9 小时前
jQuery特殊属性操作方法
前端·javascript·jquery
ShiJiuD6668889999 小时前
外卖项目总结下 (前端板块)
前端
daols889 小时前
vue vxe-table 复制数据到 Excel:支持带表头复制
vue.js·excel·vxe-table
liming49510 小时前
Maven中央库迁移
服务器·前端·maven
努力的lpp10 小时前
渗透主流工具完整参数手册(sqlmap、Nmap、Hydra、Dirsearch、Xray)
javascript·网络协议·测试工具·安全·http·工具
problc10 小时前
用 JavaScript 打开中国的版式文档:@sharp9/ofdjs 诞生记
开发语言·javascript·ecmascript
超哥--16 小时前
B站视频内容智能分析系统(九):React 前端与管理面板
前端·react.js·前端框架
Cutecat_19 小时前
视频字幕处理工具横向:提取模式 vs 编辑模式,该如何选择
android·前端·ios·语音识别