树状侧边栏

分为父节点father和子节点children

json要进行处理

{

id

name

...

children

}

public List<TypeListVO> getTypeList() {
    List<TypeListVO> typeListVOS=new ArrayList<>();
​
    List<Type> types=typeMapper.getType();
    for(Type type: types){
        TypeListVO typeListVO=new TypeListVO();
        BeanUtil.copyProperties(type,typeListVO);
        typeListVOS.add(typeListVO);
    }
    //filter查找掉父节点为0的
    //peek改变当前对象的孩子
    return typeListVOS.stream().filter(o -> o.getTypeFa().equals(0L))
            .peek(o -> o.setChildren(getChildrenList(o,typeListVOS)))
            .collect(Collectors.toList());
}
​
//递归处理
private List<TypeListVO> getChildrenList(TypeListVO typeListVO,List<TypeListVO> typeListVOS){
    //filter查找typeListVO的孩子节点
    //peek递归处理typeListVO的孩子
    return typeListVOS.stream().filter(o -> o.getTypeFa().equals(typeListVO.getTypeId()))
            .peek(o->o.setChildren(getChildrenList(o,typeListVOS)))
            .collect(Collectors.toList());
}

 

这里我把空的children删掉

init(){
  getTListReq().then((res)=>{
     this.asides[1].children=this.tempToAsides(res.data)
  })
},
tempToAsides(arr){
  const result=[]
  arr.forEach(item => {
    let{typeName: title,typeId: path,children: children}=item
    if(children&&children.length>0){
      children=this.tempToAsides(children)
      result.push({title,path,children})
    }else{
      result.push({title,path})
    }
  })
  return result
},

 

如果有子节点就调用当前模板

<template>
    <div>
      <template v-for="(aside, index) in asides">
      <el-submenu
        router
        v-if="aside.children && aside.children.length !== 0"
        :index="aside.path || index.toString()"
        :key="index">
          <template slot="title">
          <span >{{ aside.title }}</span>
          </template>
          <type-list :asides="aside.children"></type-list>
      </el-submenu>
      <el-menu-item
            v-else
            :index="aside.path || index.toString()"
          >
            <span class="icon"></span>
            {{ aside.title }}
          </el-menu-item>
        </template>
    </div>
</template>
<script>
import TypeList from './TypeList';
export default {
    name: "TypeList",
    data() {
        return{
            asides: []
        }
    },
    props:{
        asides: []
    },
    components:{
        TypeList: TypeList
    }
}
</script>