基于element ui的级联选择器组件实现的分类后台接口
今天在做资产管理系统的时候遇到一个分类的级联选择器,前端是用的element的组件,需要后台提供接口支持。

这个组件需要传入的数据结构大概是这样的,详细的可参考官方案例:
[{
value: '1001',
label: 'IT固定资产',
children: [{
value: '100101',
label: '服务器'
}, {
value: '100102',
label: '笔记本'
}, {
value: '100103',
label: '平板电脑'
}, {
value: '100104',
label: '存储'
}]
}]
后台的分类表结构是这样的,通过pid来关联子父级关系:

由于层级是无限级别的,因此只能通过java来处理了,并且是要递归实现,因为第一次层比较特殊,所以不放在递归里,往后的子级都是放在children里,因此可以通过递归解决。以下是具体实现代码:
@Override
public List<Map<String, Object>> getTree() {
List<Map<String, Object>> treeList = new ArrayList<>(); //根据pid查询同级分类
List<AssetCategory> categoryList = getBySelective(AssetCategory.builder().pid(0).build(), null);
if (null != categoryList && categoryList.size() > 0) {
categoryList.forEach(item -> {
Map<String, Object> itemMap = new HashMap<>();
itemMap.put("value", item.getId());
itemMap.put("label", item.getName());
getTreeList(itemMap, item.getId());
treeList.add(itemMap);
});
}
return treeList;
}
private void getTreeList(Map<String, Object> pMap, Integer pid) {
List<Map<String, Object>> itemList = new ArrayList<>();
List<AssetCategory> categoryList = getBySelective(AssetCategory.builder().pid(pid).build(), null);
if (null != categoryList && categoryList.size() > 0) {
categoryList.forEach(item -> {
Map<String, Object> itemMap = new HashMap<>();
itemMap.put("value", item.getId());
itemMap.put("label", item.getName());
getTreeList(itemMap, item.getId());
itemList.add(itemMap);
});
pMap.put("children", itemList);
}
}
如有问题欢迎指正。
基于element ui的级联选择器组件实现的分类后台接口的更多相关文章
- element UI Cascader 级联选择器 编辑 修改 数组 路径 问题(转载)
来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...
- Element UI:级联选择器Cascader_动态加载_多级请求不同接口(已知第一级调取第二级)
ELEMENT UI_CASCADER 使用过饿了么级联动态加载的小伙伴应该都知道,lazyLoad本身是一个无差别返回渲染结点的函数. 当我们存在一个需求:已知级联选择器的第一级结点,现在需要通过第 ...
- 记录一下使用element ui使用级联选择器的坑,级联选择器的默认选中
Cascader 级联选择器 使用级联选择器我使用的是默认选中值 下面是我的数据格式,只是形式相同,值不同, 后台的数据是这样的不是ID //级联选择器 <el-cascader :props= ...
- element Ui的级联选择器 任意一级选中下拉框自动关闭
封装成一个子组件 <template> <el-cascader v-model="value" clearable placeholder="请选择& ...
- krry-transfer ⏤ 基于 element 的升级版穿梭框组件发布到 npm 啦
博客地址:https://ainyi.com/81 基于 element ui 的==升级版穿梭框组件==发布到 npm 啦 看过我之前博客的同学或许知道我之前写过关于 element 穿梭框组件重构 ...
- 基于element UI 的上传插件
为了不再重复的上传文件,做了一个统一选择文件和上传文件的 基于 element UI :http://element-cn.eleme.io 前端实现文件下载和拖拽上传 演示 用法 <uploa ...
- 基于element ui的图片预览插件
写插件很简单,满足两个条件即可,一.基本的逻辑思路,二.熟悉插件语法要求.本次Vue插件也比较简单,点击“查看图片”用轮播的方式限制用户上传的图片,如图: 项目采用的是vue-element-admi ...
- element 的 Cascader 级联选择器设定默认值
Cascader 级联选择器 发现在很多的CRM管理系统里面,都有不少页面是用到这种级联选择器的,确实,功能很实用, 不过要设置默认值则应该让不少人头痛,因为你选择的时候 @change 事件的参数就 ...
- Element ui 上传文件组件(单文件上传) 点击提交 没反应
element ui 第一次上传文件后 上传其他文件再次点击不再次提交 需要使用 clearFiles 清空已上传文件列表 这时候在次点击 上传按钮 就会惊喜的发现 可以上传了使用方法 this.$r ...
随机推荐
- Windows证书操作
查看证书 在快捷命令栏输入mmc打开控制台 选择文件-->添加或删除管理单元 添加,选择计算机账户,本地计算机 添加完成证书后可以将localhost证书删除 生成localhost证书 打开v ...
- 【Java基础】【14正则表达式&常用工具类】
14.01_常见对象(正则表达式的概述和简单使用) A:正则表达式 是指一个用来描述或者匹配一系列符合某个语法规则的字符串的单个字符串.其实就是一种规则.有自己特殊的应用. 作用:比如注册邮箱,邮箱有 ...
- RDIFramework.NET ━ .NET快速信息化系统开发框架 V3.2->新增记录SQL执行过程
有时我们需要记录整个系统运行的SQL以作分析,特别是在上线前这对我们做内部测试也非常有帮助,当然记录SQL的方法有很多,也可以使用三方的组件.3.2版本我们在框架底层新增了记录框架运行的所有SQl过程 ...
- .NET Core下的Spring Cloud——前言和概述
前言 前几年一直在写类似dubbo,Srping Cloud的微服务框架辗辗转转重复了多次,也重构推翻了很多次,其中诞生了"Rabbit.Rpc","Go",& ...
- Java开发笔记(七十)Java8新增的几种泛型接口
由于泛型存在某种不确定的类型,因此很少直接运用于拿来即用的泛型类,它更经常以泛型接口的面目出现.例如几种基本的容器类型Set.Map.List都被定义为接口interface,像HashSet.Tre ...
- 为什么选择 Intellij IDEA 作为日常开发工具
作为一个从事 Java 开发的程序员,每天离不开编辑器的帮助.还记得刚开始学习 Java 编程的时候,使用 Eclipse 作为日常开发工具.后来工作以后,需要使用 Intellij IDEA,刚开始 ...
- 开源前端脚本错误监控及跟踪解决项目BadJS试用
摘要: 试用BadJS. 原文:开源前端脚本错误监控及跟踪解决项目-BadJS 试用 作者:过错 Fundebug经授权转载,版权归原作者所有. BadJS 是 一个web 前端脚本错误监控及跟踪项目 ...
- ArcGIS API for JavaScript:Layer之间那点儿事
先来看一个模型: |–TiledMapServiceLayer | |–ArcGISTiledMapServiceLayer |–DynamicLayer | |–Dyn ...
- 【图解】FlexGrid Explorer 全功能问世
前言 在去年的时候,我们推出了FlexGrid Demo,包含了FlexGrid的常用功能,如分组.滚动.冻结.自定义单元格类型.搜索面板.表格过滤器.树形结构.合并单元等,目前我们又在里面添加很多了 ...
- linux初学者常用必备命令整理
Linux命令学习 1.文件&目录处理 ls -a 全部文件 -l 详细信息 -r 递归显示子目录结构 ls -al 相当于 ls -a -l cd ..上级目录 .当前目录 ~家目录 cd ...