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

使用效果

前端代码

定义interface

export interface TreeDataItem {

    value: string;

    key: string;

    title?: string;

    slots?: Record<string, string>;

    children?: TreeDataItem[];

};

加载数据

//测试计划选择树

constsampleTreeData = ref<TreeDataItem[]>();

//加载树数据

loadSampleTreeData();

//方法定义

function loadSampleTreeData(){

    sampleTree(null).then(result => {

        sampleTreeData.value = result;

    }).finally(() => {

    })

}

后端代码

定义treeVO

@Data

public class PlantSampleTreeVO {

    //key

    private String key;

    //树节点显示的内容

    private String title;

    //默认根据此属性值进行筛选（其值在整个树范围内唯一）

    private Object value;

    //是否是叶子节点

    private List<PlantSampleTreeVO> children;

}

controller提供数据

@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数据结构。