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

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

相关推荐
天渺工作室8 分钟前
实现一个adblock/adblock plus等浏览器广告拦截器检测插件
前端·javascript
阳光是sunny32 分钟前
Vue 项目怎么做用户行为全链路监控?轻量插件方案详解
前端·面试·架构
ZhengEnCi44 分钟前
Q04-Vite禁用CSS代码分割-解决生产环境样式加载顺序混乱问题
前端·vue.js·vite
九酒1 小时前
AI Agent 开发踩坑记:口播功能非得用 APP 原生实现吗?
前端·人工智能·agent
Jackson__2 小时前
做了一段时间的AI coding后,我终于搞清了 CLI 和 MCP 的区别
前端·agent·ai编程
IT_陈寒4 小时前
JavaScript项目实战经验分享
前端·人工智能·后端
用户47949283569155 小时前
6w star,GitHub 趋势第一的 Ponytail,这个agent插件到底在火什么
前端·后端
薛定喵的谔6 小时前
我开源了一个精致的 Next.js 博客模板:Skyplume
前端·前端框架·next.js
张龙6877 小时前
构建生产级 AI Agent:工具调用与记忆架构实战指南
前端
kyriewen8 小时前
2026 年了,还在用 Node.js?Bun 迁移实战:20 分钟搞定,附踩坑记录
前端·javascript·node.js