Vue Element Cascader使用

前端使用不做说明,主要是后端思路,此方法只适合数据比较少的时候

  • 层级列表构造代码

    public class Cascader {
        @JsonSerialize(using = ToStringSerializer.class)
        private Long value;
        private String label;
        private List<Cascader> children;
    }
    
        /**
         * 分类层级列表
         * @return
         */
        @Override
        public List<Cascader> selectSysCategoryCascader() {
    
            // 返回结果
            List<Cascader> cascaderResult = new ArrayList<>();
            // 获取父分类列表
            SysCategory s = new SysCategory();
            s.setParentId(Long.valueOf(0));
            List<SysCategory> parentList = selectSysCategoryList(s);
    
            // 遍历父分类列表
            for (int i = 0; i < parentList.size(); i++) {
                // 取出父分类
                SysCategory pCategory = parentList.get(i);
                // 加入父类信息
                Cascader cascader = new         Cascader(pCategory.getCategoryId(),pCategory.getCategoryName());
    
                // 根据父分类ID获取子分类列表
                SysCategory tem = new SysCategory();
                tem.setParentId(pCategory.getCategoryId());
                List<SysCategory> sysCategories = selectSysCategoryList(tem);
    
                // 构造子分类Cascader列表
                List<Cascader> childrenList = new ArrayList<>();
                // 循环子分类加入Cascader列表
                for (int j = 0; j < sysCategories.size(); j++) {
                    SysCategory category = sysCategories.get(j);
                    Cascader children = new Cascader(category.getCategoryId(),category.getCategoryName());
                    childrenList.add(children);
                }
    
                cascader.setChildren(childrenList);
                cascaderResult.add(cascader);
            }
            return cascaderResult;
        }
    
  • 前端收到的结果


    image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。