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数据结构。
jeecgboot-vue3笔记(八)——treeSelect树形选择组件的使用(一次性加载)的更多相关文章
- jeecgboot-vue3笔记(九)——treeSelect树形选择组件的使用(异步加载)
使用效果 初始化加载顶层节点,点击各层的>加载该节点的子节点,加载后>标识去除不再重复加载. 前端代码 vue ant-design组件 tree-data,树节点,children方式或 ...
- 前端提升生产力系列三(vant3 vue3 移动端H5下拉刷新,上拉加载组件的封装)
| 在日常的移动端开发中,经常会遇到列表的展示,以及数据量变多的情况下还会有上拉和下拉的操作.进入新公司后发现移动端好多列表,但是在看代码的时候发现,每个列表都是单独的代码,没有任何的封装,都是通过v ...
- vue3 + vite实现异步组件和路由懒加载
在 Vue2 中,异步组件和路由懒加载处理使用 import 就可以很轻松实现.但是在Vue 3.x 中异步组件的使用与 Vue 2.x 完全不同了.本文就详细讲讲vue3中异步组件和路由懒加载的实现 ...
- 【Silverlight】Bing Maps学习系列(八):使用Bing Maps Silverlight Control加载自己部署的Google Maps
[Silverlight]Bing Maps学习系列(八):使用Bing Maps Silverlight Control加载自己部署的Google Maps 上个月微软必应地图(Bing Maps) ...
- 学习51cto中美团中的小知识点--组件实现按需求加载
1====>vue.20脚手架的创建 cnpm install --global vue-cli 全局安装脚手架 vue init webpack my-project 创建项目 Use ESL ...
- [转] 组件库按需加载 借助babel-plugin-import实现
前段时间一直在基于webpack进行前端资源包的瘦身.在项目中基于路由进行代码分离,http://www.cnblogs.com/legu/p/7251562.html.对于公司内部的组件库,所有内容 ...
- 组件库按需加载 借助babel-plugin-import实现
前段时间一直在基于webpack进行前端资源包的瘦身.在项目中基于路由进行代码分离,http://www.cnblogs.com/legu/p/7251562.html.对于公司内部的组件库,所有内容 ...
- Java日志组件logback使用:加载非类路径下的配置文件并设置定时更新
Java日志组件logback使用:加载非类路径下的配置文件并设置定时更新 摘自: https://blog.csdn.net/johnson_moon/article/details/7887449 ...
- WPF笔记 ( xmlns引用,Resource、Binding 前/后台加载,重新绑定) 2013.6.7更新
原文:WPF笔记 ( xmlns引用,Resource.Binding 前/后台加载,重新绑定) 2013.6.7更新 1.xmlns Mapping URI的格式是 clr-namespace:&l ...
随机推荐
- idea 启动微服务 设置 run dashboard
微服务如果很多,启动时如果在run窗口,会不是很方便,所以idea中配置了rundashboard,有时不自动出现时,需要进行配置: 配置操作如下: 我的idea版本2020.2 1.在父工程的.id ...
- 集合框架基础三——Map
Map接口 * 将键映射到值的对象 * 一个映射不能包含重复的键 * 每个键最多只能映射到一个值 Map接口和Collection接口的不同 * Map是双列的,Collection是单列的 * ...
- 这道javascript 面试题 你必须会
实现一个函数,运算结果可以满足如下预期结果: add(1)(2) // 3 add(1, 2, 3)(10) // 16 add(1)(2)(3)(4)(5) // 15 话不多说,实现如下: fun ...
- MySql各版本
Mysql 各个版本区别: 1.MySQL Community Server 社区版本,开源免费,但不提供官方技术支持. 2.MySQL Enterprise Edition 企业版本,需付费,可以试 ...
- 函数 装饰器 python
今日内容概要 1.闭包函数 2.闭包函数的实际应用 3.装饰器简介(重点加难点) 4.简易版本装饰器 5.进阶版本装饰器 6.完整版本装饰器 7.装饰器模板(拷贝使用即可) 8.装饰器语法糖 9.装饰 ...
- STL空间分配器源码分析(三)pool_allocator
一.摘要 pool_allocator是一种基于单锁内存池的空间分配器,其内部采用内存池思想,通过构建16个空闲内存块队列,来进行内存的申请和回收处理.每个空闲队列管理的内存块大小固定,且均为8的倍数 ...
- OpenHarmony 3.1 Beta 版本关键特性解析——ArkUI canvas组件
(以下内容来自开发者分享,不代表 OpenHarmony 项目群工作委员会观点) 江英杰 华为技术有限公司 canvas 是 ArkUI 开发框架里的画布组件,常用于自定义绘制图形.因为其轻量.灵活. ...
- HttpRunner的PB序列化工具类解决方案(python3)
背景 年初的时候团队内落地了HttpRunner3框架,简单介绍下:HttpRunner 是一款由python开发的面向 HTTP(S) 协议的开源通用测试框架,用例脚本为 YAML/JSON 格式, ...
- Go汇编语法和MatrixOne使用介绍
目录 MatrixOne数据库是什么? Go汇编介绍 为什么使用Go汇编? 为什么不用CGO? Go汇编语法特点 操作数顺序 寄存器宽度标识 函数调用约定 对写Go汇编代码有帮助的工具 avo tex ...
- 【转】python代码优化常见技巧
https://blog.csdn.net/egefcxzo3ha1x4/article/details/97844631