效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020112115100929.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjYyMzMx,size_16,color_FFFFFF,t_70#pic_center)
前端用的vue+element ui
前端代码
<template>
<div class="app-container">
<el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
<el-tree
ref="tree2"
:data="data2"
:props="defaultProps"
:filter-node-method="filterNode"
class="filter-tree"
default-expand-all
/>
</div>
</template>
<script>
import subject from '@/api/edu/subject'
export default {
data() {
return {
filterText: '',
data2: [],
defaultProps: {
children: 'children',
label: 'title'
}
}
},
watch: {
filterText(val) {
this.$refs.tree2.filter(val)
}
},
created(){
this.getAllSubjectList()
},
methods: {
getAllSubjectList(){
subject.getSubjectList()
.then(response =>{
this.data2 = response.data.list
})
},
filterNode(value, data) {
if (!value) return true
return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
}
}
}
</script>
后端controller代码
@Override
public List<OneSubject> getAllOneTwoSubject() {
QueryWrapper<EduSubject> onewrapper = new QueryWrapper<>();
onewrapper.eq("parent_id","0");
List<EduSubject> oneSubjectList = baseMapper.selectList(onewrapper);
QueryWrapper<EduSubject> twowrapper = new QueryWrapper<>();
onewrapper.ne("parent_id","0");
List<EduSubject> twoSubjectList = baseMapper.selectList(twowrapper);
ArrayList<OneSubject> finalSubjectList = new ArrayList<>();
for (int i = 0; i < oneSubjectList.size(); i++) {
EduSubject eduSubject = oneSubjectList.get(i);
OneSubject oneSubject = new OneSubject();
BeanUtils.copyProperties(eduSubject,oneSubject);
ArrayList<TwoSubject> twoFinalSubject = new ArrayList<>();
for (int m = 0; m < twoSubjectList.size(); m++) {
EduSubject eduSubject1 = twoSubjectList.get(m);
if (eduSubject1.getParentId().equals(eduSubject.getId())){
TwoSubject twoSubject = new TwoSubject();
BeanUtils.copyProperties(eduSubject1,twoSubject);
twoFinalSubject.add(twoSubject);
}
}
oneSubject.setChildren(twoFinalSubject);
finalSubjectList.add(oneSubject);
}
return finalSubjectList;
}
实体类代码
@Data
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
@ApiModel(value="EduSubject对象", description="课程科目")
public class EduSubject implements Serializable {
private static final long serialVersionUID = 1L;
@ApiModelProperty(value = "课程类别ID")
@TableId(value = "id", type = IdType.ID_WORKER_STR)
private String id;
@ApiModelProperty(value = "类别名称")
private String title;
@ApiModelProperty(value = "父ID")
private String parentId;
@ApiModelProperty(value = "排序字段")
private Integer sort;
@ApiModelProperty(value = "创建时间")
@TableField(fill = FieldFill.INSERT)
private Date gmtCreate;
@ApiModelProperty(value = "更新时间")
@TableField(fill = FieldFill.INSERT_UPDATE)
private Date gmtModified;
}