elementUI级联选择器使用无限极数

最新推荐文章于 2023-06-05 15:22:30 发布

原创最新推荐文章于 2023-06-05 15:22:30 发布 · 430 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #前端

本文介绍如何在前端实现级联选择器功能，包括界面代码配置、后端数据交互及无限极数的处理方法。

前端

第一步：先在新增/编辑二合一的界面代码中，将下面的代码复制到需要使用级联选择器的字段上

<el-form-item label="上级部门">
<--
  :options：是我们后端返回的部门树数据 应该定义在data()函数中 通过axios请求将options赋值
   :value: 我们需要传到后端的字段
    :label ：选中后的效果
  -->
  <el-cascader
      v-model="editForm.parentId"
      :options="options"
      :props="{ checkStrictly: true,
        value:'id',
        label:'name'
      }"
      clearable></el-cascader>
</el-form-item>

第二步：在data的return中定义一个options[ ] 数组来接收后端的数据

  return {
    options: []
      }

第三步：在mehtods方法集合中，定义一个getDeptTree方法，方法中通过axios请求将options赋值

getDeptTree() {
  this.$http.get("/dept/tree")  //为后端接口
      .then(result => {
        this.options = result.data
      })
}

第四步：在编辑界面发送axios请求的上面加一个if判断咱们选择器选择的数据是否为一个数组，如果是，就把数组的最后一位数重新赋值给当前数组的名字

if (para.parentId && para.parentId instanceof Array) { //判断para.parentId是否为数组
  // let par = arr[arr.length - 1]; //取出数组最后一位数
  // para.parentId = par    //赋值给para.parentId
  para.parentId = para.parentId[para.parentId.length - 1]
}

第五步：在最下方的钩子函数mounted(){}中调用getDeptTree方法

//mounted：钩子函数的11种方法之一 vue实例挂载完成时执行里面的方法        
mounted() {          
   this.getDepartments();
}

后端

doamin层

//无限极数
@JsonInclude(JsonInclude.Include.NON_EMPTY)
private List<Department> children = new ArrayList<>();

Controller层

//无限极数
@GetMapping("/tree")
private List<Department> tree(){
    return iDepartmentServicee.tree();
}

Service层

//无限极数
List<Department> tree();

Service实现类

   @Override
    public List<Department> tree() {
        List<Department> result = new ArrayList<>();
        // 查询出所有的数据
        List<Department> allDepartments = departmentMapper.findAll();
        // 将 全部的部门数据 转成map key  value
        Map<Long, Department> deptMap = allDepartments.stream().collect(Collectors.toMap(Department::getId, dept -> dept));
//        Map<Long, Department> deptMap = new HashMap<>();
//        allDepartments.forEach(dept->{
//            deptMap.put(dept.getId(),dept);
//        });
        // 在内存中组装数据
        for (Department dept : allDepartments) {
            if (null == dept.getParentId()){
                // 这就是一级数据
                result.add(dept);
            }else {
                // 这个是儿子 dept对象 它不是爹 那么它有几个爹
                Department parent = deptMap.get(dept.getParentId());
                parent.getChildren().add(dept);
            }
        }
        return result;
    }