jeecgboot-vue3笔记（八）——treeSelect树形选择组件的使用（一次性加载）

使用效果

前端代码

定义interface

代码语言：javascript复制

export interface TreeDataItem {
    value: string;
    key: string;
    title?: string;
    slots?: Record<string, string>;
    children?: TreeDataItem[];
};

加载数据

代码语言：javascript复制

//测试计划选择树
constsampleTreeData = ref<TreeDataItem[]>();
//加载树数据
loadSampleTreeData();
//方法定义
function loadSampleTreeData(){ 
    sampleTree(null).then(result => { 
        sampleTreeData.value = result;
    }).finally(() => { 
    })
}  

后端代码

定义treeVO

代码语言：javascript复制

@Data
public class PlantSampleTreeVO {
    //key
    private String key;
    //树节点显示的内容
    private String title;
    //默认根据此属性值进行筛选（其值在整个树范围内唯一）
    private Object value;
    //是否是叶子节点
    private List<PlantSampleTreeVO> children;
}

controller提供数据

代码语言：javascript复制

@Override
	public List<PlantSampleTreeVO> getPlantSampleTreeVO() {
		List<PlantSampleTreeVO> plantSampleTreeVOList = new ArrayList<>();
		//查询所在班组,plant member
		List<Plant> plantList = plantService.list();
		//循环查询各班组相关的样品组模板
		for(Plant plant : plantList) {
			//创建顶层树/节点
			PlantSampleTreeVO plantNode = new PlantSampleTreeVO();
			plantNode.setKey(plant.getId());
			plantNode.setValue(plant.getId());
			plantNode.setTitle(plant.getPlantName());
			plantNode.setChildren(new ArrayList<>());
			plantSampleTreeVOList.add(plantNode);
			//查询班组相关的样品组模板
			QueryWrapper<SampleGroupTemplate> sampleGroupTemplateQueryWrapper = new QueryWrapper<>();
			sampleGroupTemplateQueryWrapper.eq("plantid",plant.getId());
			List<SampleGroupTemplate> sampleGroupTemplateList = sampleGroupTemplateService.list(sampleGroupTemplateQueryWrapper);
			//循环各样品组模板显示其下的测试计划/样品
			for(SampleGroupTemplate sampleGroupTemplate: sampleGroupTemplateList){
				//添加到树上
				PlantSampleTreeVO sampleGroupNode = new PlantSampleTreeVO();
				sampleGroupNode.setKey(sampleGroupTemplate.getId());
				sampleGroupNode.setValue(sampleGroupTemplate.getId());
				sampleGroupNode.setTitle(sampleGroupTemplate.getSampleGroupName());
				sampleGroupNode.setChildren(new ArrayList<>());
				plantNode.getChildren().add(sampleGroupNode);
				//查询样品组模板显示其下的测试计划/样品
				QueryWrapper<SgtSample> sampleQueryWrapper = new QueryWrapper<>();
				sampleQueryWrapper.eq("templateid",sampleGroupTemplate.getId());
				List<SgtSample> sampleList = this.list(sampleQueryWrapper);
				//循环各样品
				for(SgtSample sample: sampleList) {
					PlantSampleTreeVO sampleNode = new PlantSampleTreeVO();
					sampleNode.setKey(sample.getId());
					sampleNode.setValue(sample.getId());
					sampleNode.setTitle(sample.getSampleName());
					sampleNode.setChildren(new ArrayList<>());//序列化为[]而非null，或需要配置序列化时null的节点不添加
					sampleGroupNode.getChildren().add(sampleNode);
				}
			}
		}
		return plantSampleTreeVOList;
	}

应用说明

适用于少量数据，大量数据应异步加载。 如一次加载树节点全部数据时，不宜使用循环查询的方式，应使用三个查询，然后将查询处的数据在service层中进行处理构建tree数据结构。

controller interface service tree 后端

0 人点赞