【递归取值】：elementUI tree 的展示

最新推荐文章于 2022-11-20 22:59:45 发布

Justkang前端

最新推荐文章于 2022-11-20 22:59:45 发布

阅读量290

点赞数

分类专栏：前端 vue 笔记文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/CSDNJXZK/article/details/125439870

版权

ElementUI Tree组件数据处理字段映射前端开发

关键词由CSDN通过智能技术生成

前端同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

vue

14 篇文章 0 订阅

订阅专栏

笔记

2 篇文章 0 订阅

订阅专栏

背景

在使用，elementui 对tree结构树组件进行渲染的时候，后端给我的字段与element不太相符
需要自己再添加一个字段

上图

返回的字段
在这里插入图片描述
修改后

代码与效果

async GETTREE(){
      let result = await getTree()
      // console.log(result)
      if(result.data.code == 0) {
        let myTree = result.data.data
        // 处理顶层name
        myTree.name = myTree.label.name
        // 递归给每个child加上name字段
        function mapChilren (child) {
          child.forEach((item)=>{
            item.name = item.label.name
            if(item.children) {
              return mapChilren(item.children)
            } else {
              return
            }
          })
        }
        mapChilren(myTree.children)
        this.treeData = myTree
        // console.log(this.treeData)
      }
    },