Json数组 - VueClub

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

后台返回了一组菜单数组,其中的数据是通过parent这个属性来关联是否有父子(比如一二级菜单)关系,但是返回的数据有可能是多级菜单的数组,现在准备用element的菜单组件去动态渲染,怎么把后台返回的数组通过parent属性构造成这种

chaoren 1楼•1 个月前

自己写个函数遍历一下呗

feer 2楼•1 个月前作者

const data = [{…}, {…}, …]

const trees = data.reduce((result, node) => {
  node.children = (result.nodeMap[node.id] || {}).children || []
  result.nodeMap[node.id] = node
  if (node.parent === null) {
    result.trees.push(node)
  } else {
    const parent = result.nodeMap[node.parent] || (result.nodeMap[node.parent] = {children: []})
    parent.children.push(node)
  }
  return result
}, {nodeMap: {}, trees: []}).trees

会修改原始数据。如果需要 Immutable，先 clone 再 reduce。