Cascader级联选择器数据数据格式不知道的可以去官网看下;这里我就不表示什么了。

部门实体类:

 import lombok.Data;

 @Data
public class Department {
private Integer id; private Integer parentId; private String name; public Department(Integer id, Integer parentId, String name) {
this.id = id;
this.parentId = parentId;
this.name = name;
} public static TreeItem deptNode(Department dept) {
TreeItem treeItem = new TreeItem();
treeItem.setId(dept.getId());
treeItem.setName(dept.getName());
treeItem.setParentId(dept.getParentId());
return treeItem;
}
}

用户实体类:

 import lombok.Data;

 @Data
public class Employee { private Integer id; private String name; private Integer deptId; public Employee(Integer id, String name, Integer deptId) {
this.id = id;
this.name = name;
this.deptId = deptId;
} public static TreeItem empNode(Employee emp) {
TreeItem treeItem = new TreeItem();
treeItem.setId(emp.getId());
treeItem.setName(emp.getName());
treeItem.setParentId(emp.getDeptId());
return treeItem;
}
}

返回数据实体类:

 import lombok.Data;

 import java.util.List;

 @Data
public class TreeItem {
private Integer id; private Integer parentId; private String name; private List<TreeItem> children;
}

数据处理操作,这里是用java8新的特性写的。不懂的可以学习下,挺好用的

 import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.Map;
import java.util.stream.Collectors; public class App {
public static void main(String[] args) {
//创建部门
List<Department> deptList = Arrays.asList(
new Department(1, 0, "星宇"),
new Department(2, 1, "金3"),
new Department(3, 2, "金3/1"),
new Department(4, 2, "金3/2"),
new Department(5, 1, "总1"),
new Department(6, 5, "总1/2") );
//创建员工
List<Employee> empList = Arrays.asList(
new Employee(1, "张三", 5),
new Employee(2, "李四", 6),
new Employee(3, "王五", 2),
new Employee(4, "赵六", 2),
new Employee(5, "田七", 3),
new Employee(6, "牛八", 4)
);
//转换成结点
List<TreeItem> allDept = deptList.stream()
.map(Department::deptNode)
.collect(Collectors.toList());
//按照上级部门分组
Map<Integer, List<TreeItem>> deptMap = allDept.stream()
.collect(Collectors.groupingBy(TreeItem::getParentId));
//给每个部门绑定子部门
allDept.forEach(node ->
node.setChildren(deptMap.get(node.getId()))
); List<TreeItem> treeItem = deptMap.get(0); Map<Integer, List<TreeItem>> empMap = empList.stream()
.filter(emp -> emp.getDeptId() != null)
.map(Employee::empNode)
.collect(Collectors.groupingBy(TreeItem::getParentId));
//BFS辅助队列
List<TreeItem> queue = new ArrayList<>();
queue.addAll(treeItem);
for (int i = 0; i < queue.size(); i++) {
TreeItem node = queue.get(i);
//遍历时先将子部门放入队列中
if (node.getChildren() != null) {
queue.addAll(node.getChildren());
} else {
node.setChildren(new ArrayList<>());
}
//再将部门成员放入子结点中
List<TreeItem> children = empMap.get(node.getId());
if (children != null) {
node.getChildren().addAll(children);
}
} treeItem.forEach(x -> System.out.println(x)); }
}
TreeItem(id=1, parentId=0, name=星宇, children=[TreeItem(id=2, parentId=1, name=金3, children=[TreeItem(id=3, parentId=2, name=金3/1, children=[TreeItem(id=5, parentId=3, name=田七, children=null)]), TreeItem(id=4, parentId=2, name=金3/2, children=[TreeItem(id=6, parentId=4, name=牛八, children=null)]), TreeItem(id=3, parentId=2, name=王五, children=null), TreeItem(id=4, parentId=2, name=赵六, children=null)]), TreeItem(id=5, parentId=1, name=总1, children=[TreeItem(id=6, parentId=5, name=总1/2, children=[TreeItem(id=2, parentId=6, name=李四, children=null)]), TreeItem(id=1, parentId=5, name=张三, children=null)])])

上面是我打印出来的数据,其实你们只要返回treeItem这个集合就可以了,这个数据结构符合Cascader级联选择器。

ElementUI组件Cascader级联选择器数据后台处理的更多相关文章

  1. ElementUI 之 Cascader 级联选择器指定 value label

    ElementUI 的 Cascader 级联选择器个人觉得很好用,但是对 :options="options" 里的数据格式是有特定要求的:input 框显示的值是 option ...

  2. element-ui Cascader 级联选择器示例

    <html> <head>test</head> <style> @import url("http://unpkg.com/element- ...

  3. element UI Cascader 级联选择器 编辑 修改 数组 路径 问题(转载)

    来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...

  4. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  5. Cascader 级联选择器

    当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择. 基础用法 有两种触发子菜单的方式 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器. 通过expa ...

  6. element 的 Cascader 级联选择器设定默认值

    Cascader 级联选择器 发现在很多的CRM管理系统里面,都有不少页面是用到这种级联选择器的,确实,功能很实用, 不过要设置默认值则应该让不少人头痛,因为你选择的时候 @change 事件的参数就 ...

  7. vue+element级联选择器对接后台数据

    1.后台接口返回的数据肯定要和级联选择器的数据一致,所以我专门弄个model存放返回的值,如下:/** * @Auther: GGDong * @Date: 2019/4/3 10:30 */@Get ...

  8. Element-ui Cascader 级联选择器 同时返回 value 和 label

    给 cascader 组件赋值一个别名 ref="cascaderAddr" <el-form-item label="部门" prop="or ...

  9. 【前端】Element-UI 省市县级联选择器 JSON数据

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/element_cascader.html 不想自己处理的就直接下载吧 http://shamoyuu.bj.bce ...

随机推荐

  1. JAVA中hashmap的分析

    从http://blog.csdn.net/luanlouis/article/details/41576373?utm_source=tuicool&utm_medium=referral学 ...

  2. 【转】使用DataConnectionDialog在运行时设置数据源连接字符串

    介绍: DataConnectionDialog 类: 打开“数据连接”对话框,获取用户选择的数据连接信息. 命名空间为:Microsoft.Data.ConnectionUI 所在程序集:Micro ...

  3. 论文笔记:多标签学习综述(A review on multi-label learning algorithms)

    2014 TKDE(IEEE Transactions on Knowledge and Data Engineering) 张敏灵,周志华 简单介绍 传统监督学习主要是单标签学习,而现实生活中目标样 ...

  4. tensorflowxun训练自己的数据集之从tfrecords读取数据

    当训练数据量较小时,采用直接读取文件的方式,当训练数据量非常大时,直接读取文件的方式太耗内存,这时应采用高效的读取方法,读取tfrecords文件,这其实是一种二进制文件.tensorflow为其内置 ...

  5. 简单介绍--TOSCA自动化测试工具

    1.工具源自 TOSCA由公司Tricentis研发.这是一家来自奥地利的软件初创企业,专门帮助企业开发团队进行自动化软件测试.(百科) TOSCA的思想是,不用会编程的测试人员可以直接上手自动化. ...

  6. java.lang.OutOfMemoryError: PermGen space异常及解决

    PermGen space的全称是Permanent Generation space,是指内存的永久保存区域,这块内存主要是被JVM存放Class和Meta信息的,Class在被Loader时就会被 ...

  7. 【caffe】用训练好的imagenet模型分类图像

    因为毕设需要,我首先是用ffmpeg抽取某个宠物视频的关键帧,然后用caffe对这个关键帧中的物体进行分类. 1.抽取关键帧的命令: E:\graduation design\FFMPEG\bin&g ...

  8. igraph Tutorial

      igraph Tutorial¶   参考http://www.cs.rhul.ac.uk/home/tamas/development/igraph/tutorial/tutorial.html ...

  9. Java-性能调优工具-jstat

    jps 查看当前java进程 [ ~]# jps 9939 Resin 9874 WatchdogManager 18293 Jps jstat -gc -t pid 1s [ ~]# jstat - ...

  10. [HAOI2017模拟]百步穿杨

    今天的考试题. 考试的时候因为以前做过还写过题解,然后就以为模型已经很清楚了,然后就开始直接推.最后因为蜜汁自信一定能推出来,然后模型搞错了,只能交个暴力上去,于是这场考试GG. 第一次碰上这道题是在 ...