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

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

相关推荐
科技探秘人10 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人11 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR16 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香18 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969321 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai26 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91535 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫6 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试