Vue Element Cascader使用

最新推荐文章于 2025-06-29 09:04:23 发布

原创最新推荐文章于 2025-06-29 09:04:23 发布 · 686 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #vue

Java 专栏收录该内容

18 篇文章

订阅专栏

本文主要探讨了在前端Vue Element UI中使用Cascader组件时，如何与后端Java进行数据交互的思路。适用于数据量较小的情况。文章详细介绍了后端如何构建层级列表以支持Cascader的功能，并指出前端接收并展示这些数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

主要用于实现java代码于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;
    }

前端收到的结果