前端 将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()

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

相关推荐
彭亚川Allen16 分钟前
从零手搓 RAG 之 Embedding 技术
前端·后端·面试
OpenTiny社区17 分钟前
GenUI SDK v1.4.0 的 React 渲染器到底做对了什么?
前端·github·ai编程
jerrywus1 小时前
chrome-devtools-mcp 总弹授权、抢标签页?我是这样一步步配好的
前端·agent·mcp
橘猫走江湖1 小时前
Vue 3 虚拟 DOM:作用、触发机制,以及怎样变成页面上的真实节点
前端·vue.js·dom
郑州光合科技余经理1 小时前
同城小程序开发:同一笔单在用户端和商家端各显示到哪
android·java·开发语言·前端·后端·uni-app·php
zzppff1p2 小时前
用AI写了个小游戏
前端·javascript
陈随易2 小时前
终于 Token 自由了,AI 开支下降 10 倍
前端·后端·程序员
gqc582 小时前
Markdown 写完怎么验证?我现在的 4 步本地检查流程
前端
计算机魔术师3 小时前
我重算了新云的账,发现亏的不是算力,是时间
前端
wiseyao12193 小时前
uniapp scroll-view滚动到最后
前端·javascript·uni-app