无限级数基于elmentUi

一.背景

主要用于实现父级目录下有子目录的情况

二.实现

1.编写controller接口

@GetMapping(value = "/treeData")
    public JSONResult treeData(){
        List<CourseType> treeData = courseTypeService.treeData();
        return JSONResult.success(treeData);
    }

2.业务

这里使用map保存分类对象，减少一层for循环

  @Override
    @Cacheable(cacheNames = "course",key = "'treedata'")
    public List<CourseType> treeData() {
        // 1.查询所有的分类
        List<CourseType> courseTypes = super.selectList(null);
        // 用map保存对象，减少查询次数
        Map<Long, CourseType> courseTypeMap =
                courseTypes.stream().collect(Collectors.toMap(CourseType::getId, CourseType -> CourseType));
        // 2.查询一级分类
        List<CourseType> firstCourseTypes = new ArrayList<>();
        for (CourseType courseType: courseTypes) {
            if (courseType.getPid() != null && courseType.getPid() == 0) { // pid = 0 为顶级目录
                firstCourseTypes.add(courseType);
            } else { // 否则就是次级目录
                // 通过map中key获取器父类
                CourseType parentCourseType = courseTypeMap.get(courseType.getPid());
                if (parentCourseType != null) {
                    // 给父类添加子目录
                    parentCourseType.getChildren().add(courseType);
                }
            }
        }
        return firstCourseTypes;
    }

3.实体类

    // 课程树
    @TableField(exist = false)
    // 集合为空不参与jason转化
    @JsonInclude(value = JsonInclude.Include.NON_EMPTY)
    private List<CourseType> children = new ArrayList<>();

4.前端

<el-form-item label="课程类型" prop="courseTypeId" >
	<el-cascader style="width: 300px"
			:props="courseTypeProps"
			v-model="addForm.courseTypeId"
			placeholder="课程类型"
			:options="courseTypes"
			expand-trigger="hover"
			:show-all-levels="false"
			filterable
			change-on-select
	></el-cascader>
</el-form-item>