vue3中使用Cascader 级联选择器

Jr小星灬星

于 2024-07-25 09:12:24 发布

阅读量22

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/ZX115675/article/details/140679993

版权

前端处理

          <el-cascader v-model="address" :options="provinceListData" :props="{'value':'数据库字段','label':'数据库字段'}"/>

java代码(实体类中要有List集合并且名称为children)


    public R provinceList() {
        Map<Integer, Province> map = new HashMap<>();
        List<Province> provinceList = provinceMapper.selectList(null);
        for (Province province : provinceList) {
            // 将查询结果存入map中
            map.put(province.getId(), province);
        }
        // 处理结果
        ArrayList<Province> resultList = new ArrayList<>();
        for (Province province : provinceList) {
            // 判断是否为一级目录
            if (province.getCityId() == 0) {
                resultList.add(province);
            } else {
                // 不是一级目录 判断children是否开辟空间
                Integer provinceId = province.getCityId();
                Province parent = map.get(provinceId);
                List<Province> children = parent.getChildren();

                if (children == null) {
                    children = new ArrayList<>();
                    parent.setChildren(children);
                }
                children.add(province);
            }
        }
        Map<String, Object> resultMap = new HashMap<>();
        resultMap.put("resultList", resultList);
        resultMap.put("map", map);
        return R.OK(resultMap);
    }