分为父节点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>