基于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 ...
随机推荐
- es简单打造站内搜索
最近挺忙的,在外出差,又同时干两个项目.白天一个晚上一个,特别是白天做的项目,马上就要上线了,在客户这里 三天两头开会,问题很多真的很想好好静下来怼代码,半夜做梦都能fix bugs~ 和客户交流真的 ...
- java_泛型2
一.泛型_泛型概述及好处 1).在定义集合时,我们是希望集合中只存储一种类型的引用,这时可以使用泛型: ArrayList<String> list = new Arr ...
- vue element-ui 2.3.4版本 input number值为0时 显示不出来
解决:官方修复了这个bug.升级element-ui为2.3.5版本就好了
- 驰骋工作流引擎JFlow与activiti的对比之2种取消模式
1. 取消模式(Cancel Activity) 就是将某个活动取消. JFLOW中,类似与删除流程操作相同. 不能删除:不允许删除. 逻辑删除:仅仅将此流程标记为删除状态,数据仍然存在节点表单与流程 ...
- Mysql表分区的选择与实践小结
在一些系统中有时某张表会出现百万或者千万的数据量,尽管其中使用了索引,查询速度也不一定会很快.这时候可能就需要通过分库,分表,分区来解决这些性能瓶颈. 一. 选择合适的解决方法 1. 分库分表. 分库 ...
- CentOS6.9升级autoconf版本,解决”Autoconf version 2.64 or higher is required“错误
安装软件时提示说需要Autoconf 2.64或更高的版本: # autoconf configure.ac:: error: Autoconf version 2.64 or higher is r ...
- 轨迹系列1——一种基于路网图层的GPS轨迹优化方案
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 GPS数据正常情况下有20M左右的偏移,在遇到高楼和桥梁等情况 ...
- Github:failed to add file / to index
我把Test项目上传到github上,为了截一部分图,来写博客.所以我就上传成功之后,把仓库Respository Test删除了,但是当我再次上传的时候,发现上传不上,会提示failed to ad ...
- 【已解决】checkout 配置无效的问题可以进来看下
在日常工作中,我们经常会遇到要更新一个项目,但是由于更改了配置,需要将这些配置commit或者checkout,但是有的同学不想commit怎么办呢,只能通过checkout,那么问题又来了,改了很多 ...
- Linux系统下 MySQL 安装 指南(5.7和8.0 版本)
一. 准备工作 1 删除本地centos7中的mariadb: 查看系统中是否已安装 mariadb 服务: rpm -qa | grep mariadb 或 yum list installed | ...