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

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

相关推荐
码事漫谈1 小时前
当AI开始“思考”:我们是否真的准备好了?
前端·后端
许杰小刀1 小时前
ctfshow-web文件包含(web78-web86)
android·前端·android studio
我是Superman丶2 小时前
Element UI 表格某行突出悬浮效果
前端·javascript·vue.js
恋猫de小郭2 小时前
你的代理归我了:AI 大模型恶意中间人攻击,钱包都被转走了
前端·人工智能·ai编程
xiaokuangren_3 小时前
前端css颜色
前端·css
hoiii1873 小时前
C# 基于 LumiSoft 实现 SIP 客户端方案
前端·c#
anOnion3 小时前
构建无障碍组件之Meter Pattern
前端·html·交互设计
小码哥_常3 小时前
Spring Boot配置diff:解锁配置管理新姿势
前端
小码哥_常4 小时前
告别onActivityResult!Android数据回传的3大痛点与终极解决方案
前端
hhcccchh4 小时前
1.2 CSS 基础选择器、盒模型、flex 布局、grid 布局
前端·css·css3