前端 将list转为树结构

需求:将后台传递的集合转为组件需要的树形结构

结果如下:

具体转化:

复制代码
<el-form-item label="xxxxx" prop="xx">
         <el-tree-select
           node-key="label"
           v-model="from.xxId"
           :data="treedData"
           :props="defaultProps"
           :render-after-expand="false"
         />
</el-form-item>
const treedData = ref([])
const defaultProps = {
  children: 'children',
  label: 'label'
}
async function getXxxInfo() {
  const data = await xxApi.geXxxInfo(params)
  console.log(data.list)
  let obj = {}
  data.list.forEach((item) => {
    if (obj.hasOwnProperty(item['xx'])) {
      obj[item['xx']].push({ ...item, label: item.ebankId })
    } else {
      obj[item['xx']] = []
      obj[item['xx']].push({ ...item, label: item.ebankId })
    }
  })

  for (let x in obj) {
    treedData.value.push({ label: x, children: obj[x] })
  }
}

getXxxInfo()

记录一下,大家有其他更好的办法也可以贴出来最近太忙了,抽空记录下,需要的可以参考下

相关推荐
骑着蜗牛撵大象32726 分钟前
LangChain 工具调用从声明到闭环:给智能体接上真实的手脚
前端
数据掘金37 分钟前
百度统计后台页面数据异常?从手动调用时机开始排查
前端
hunteritself38 分钟前
10 层 4K 实时剪辑,国产工作站进入广电制作核心
大数据·前端·人工智能·深度学习·transformer
踩着两条虫39 分钟前
我在浏览器里“盖”了一个村:Vue + Three.js 大屏开发踩坑记
前端·vue.js·three.js
mbshqqb44 分钟前
TypeScript基础教程之同步生成器
前端·javascript·typescript
嘟嘟同学和妮妮同学1 小时前
【升级】一个中国历史可视化站:皇帝时间线梳理、古代思想流派、诗词鉴赏 (2)
前端·html
暗夜行者之光1 小时前
LangGraph + MCP 实战:构建"自然语言查数据"的 ChatBI Agent
前端·后端
一tiao咸鱼1 小时前
还在手动海投?我做了个 AI 求职助手,自动筛选 BOSS 职位再精准投递
前端·后端·面试
尤水就下1 小时前
🔥预热:在线文档的 block 架构是如何实现的(未完待续...)
前端·javascript·架构
全栈项目管理程序猿2 小时前
ArcGIS JS 基础教程(29):CSVLayer 表格点位图层
前端·javascript