根据后台返回对象数据转化成树

最新推荐文章于 2024-01-09 14:16:35 发布

原创最新推荐文章于 2024-01-09 14:16:35 发布 · 431 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #vue.js

本文介绍了如何将后台返回的一组对象数据转换为树型结构，以适应Element UI的Tree组件。通过提供的`toTree`函数，可以将具有id、pid和children字段的对象数组转化为树形结构。示例中展示了获取系统菜单数据并进行转换的过程，最终在前端实现树形展示。对于返回树型结构的后台，文章还提及了在传递数据时的处理方式。

后台大哥不讲武德，权限树不返回树型结构，返回的是一个个单独的对象，只能自己转换成树型结构了。
在这里插入图片描述 看着是不是很痛苦呢，自己转化一下就可以了。

// 对象转化成树
  const toTree = (source, id, parentId, children) => {   
    let cloneData = JSON.parse(JSON.stringify(source))
    return cloneData.filter(father=>{
        let branchArr = cloneData.filter(child => father[id] == child[parentId])
        branchArr.length>0 ? father[children] = branchArr : ''
        return father[parentId] == 0  // 如果第一层不是parentId=0，请自行修改
    })
  }

调用一下

// 获取系统菜单
  const getSysMenuList = () => {
      const menuListState = reactive({
        List: []
      })
      getSysMenu().then(res => {
        const { data } = res
        if(data.statusCode === '00000') {
          console.log(data.rspData)
          menuListState.List = toTree(data.rspData, 'id', 'pid', 'children')
        }
      }).catch(err => {
        console.log(err)
      })
    return {
      menuListState
    }
  }

来看看返回的结果吧
在这里插入图片描述
配合Element ui 的tree组件来看看展示效果吧

搞定收工！！
有些小伙伴的后台是讲武德的，返回的是树型结构的数组，但传给后台数据的时候，若叶子节点为全选，则只传父节点key，否则传所有勾选的子节点key！可以看看另外一篇博客！传送门