今天在做资产管理系统的时候遇到一个分类的级联选择器,前端是用的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的级联选择器组件实现的分类后台接口的更多相关文章

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

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

  2. Element UI:级联选择器Cascader_动态加载_多级请求不同接口(已知第一级调取第二级)

    ELEMENT UI_CASCADER 使用过饿了么级联动态加载的小伙伴应该都知道,lazyLoad本身是一个无差别返回渲染结点的函数. 当我们存在一个需求:已知级联选择器的第一级结点,现在需要通过第 ...

  3. 记录一下使用element ui使用级联选择器的坑,级联选择器的默认选中

    Cascader 级联选择器 使用级联选择器我使用的是默认选中值 下面是我的数据格式,只是形式相同,值不同, 后台的数据是这样的不是ID //级联选择器 <el-cascader :props= ...

  4. element Ui的级联选择器 任意一级选中下拉框自动关闭

    封装成一个子组件 <template> <el-cascader v-model="value" clearable placeholder="请选择& ...

  5. krry-transfer ⏤ 基于 element 的升级版穿梭框组件发布到 npm 啦

    博客地址:https://ainyi.com/81 基于 element ui 的==升级版穿梭框组件==发布到 npm 啦 看过我之前博客的同学或许知道我之前写过关于 element 穿梭框组件重构 ...

  6. 基于element UI 的上传插件

    为了不再重复的上传文件,做了一个统一选择文件和上传文件的 基于 element UI :http://element-cn.eleme.io 前端实现文件下载和拖拽上传 演示 用法 <uploa ...

  7. 基于element ui的图片预览插件

    写插件很简单,满足两个条件即可,一.基本的逻辑思路,二.熟悉插件语法要求.本次Vue插件也比较简单,点击“查看图片”用轮播的方式限制用户上传的图片,如图: 项目采用的是vue-element-admi ...

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

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

  9. Element ui 上传文件组件(单文件上传) 点击提交 没反应

    element ui 第一次上传文件后 上传其他文件再次点击不再次提交 需要使用 clearFiles 清空已上传文件列表 这时候在次点击 上传按钮 就会惊喜的发现 可以上传了使用方法 this.$r ...

随机推荐

  1. 痞子衡嵌入式:并行接口NAND互操作性标准(JEDEC-JESD230)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是JESD230标准. 众所周知,最早也最流行的Raw NAND接口标准是ONFI标准,痞子衡在 并行接口NAND标准(ONFI)及SLC ...

  2. F#周报2019年第8期

    新闻 Fable 2.2发布,支持匿名记录 Paket提升还原时间 Microsoft.Jupyter.Core预览 .NET Framework 4.8早期可访问编译版本3745 博客 使用SAFE ...

  3. 用C#写的一个OA类的APP, ios、Android都能跑,有源代码

    这是一个用C#写的OA类APP,功能包含请假.报销.部门管理.签到.IM.文件上传等功能 话不多说,先看视频 视频地址:http://v.youku.com/v_show/id_XMzUwMjQ1Mz ...

  4. C# 绘制PDF图形——基本图形、自定义图形、色彩透明度

    引言 在PDF中我们可以通过C#程序代码来添加非常丰富的元素来呈现我们想要表达的内容,如绘制表格.文字,添加图形.图像等等.在本篇文章中,我将介绍如何在PDF中绘制图形,并设置图形属性的操作. 文章中 ...

  5. Android破解学习之路(十二)—— GP录像汉化过程及添加布局

    前言 最近闲着发慌,想起了很久之前就想汉化的一款录像APP,APP大小不到1MB,但是好用,本期就给大家带来汉化的基本步骤以及如何在APP中添加我们汉化的信息 汉化思路 查找关键字 关键字挺好找的,由 ...

  6. response.writeHead

    response.writeHead(statusCode[, statusMessage][, headers]) 查看英文版 版本历史 statusCode <number> stat ...

  7. js中数组的map()方法

    map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值 map()方法按照原是数组顺序以此处理元素 注意:map()不会对空数组进行检测 :不会改变原始的数组 实例: var nu ...

  8. input中只能写入数字int、float

    input 属性 type="number" <input type="number" min="1" max="100&q ...

  9. vue+vuecli+webapck2实现多页面应用

    准备工作 在本地用vue-cli新建一个项目,首先安装vue-cil,命令: npm install -g vue-cli 新建一个vue项目,创建一个基于"webpack"的项目 ...

  10. 这个月干啥去了?——H5+移动应用实战开发

    又到了公司一年当中最忙的时刻了,为了赶项目,现在居然开启了996模式,这是我从事.net开发以来从来没遇到过的. 一转眼,一个月又过了,回头一看,这个月一篇文章都没有发,上个月忙着一个人做项目,项目忙 ...