el-cascader 级联选择器动态加载

后台项目目录，只要这两个类

后台Controller

import com.tpy.springboot_vue_demo.api.MyResult;
import com.tpy.springboot_vue_demo.entity.User;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;

@RestController
public class LoginController {

    @GetMapping(value = "/competence1")
    public MyResult competence(){
        MyResult myResult = new MyResult();
        List list = new ArrayList<>();
        list.add("hello1");
        list.add("hello2");
        list.add("hello3");
        myResult.setList(list);
        return myResult;
    }

    @GetMapping(value = "/competence2")
    public MyResult persisment2(String competenceName){
        System.out.println(competenceName);
        MyResult myResult = new MyResult();
        List list = new ArrayList<>();
        list.add("world1");
        list.add("world2");
        list.add("world3");
        myResult.setList(list);
        return myResult;
    }

}

MyResult,补齐get、set

import java.util.List;

public class MyResult {
    private int code;
    private String msg;
    private List list;
    private Object obj;
}

el-cascader代码

• :options="cascaderData":绑定的数据
• @active-item-change="handleItemChange":点击选项触发的方法
• 节点里面的属性，一个value、lable、和子节点

:props="{
      value: 'id',
      label: 'name',
      children: 'cities'
    }"

现在我们只要在cascaderData：添加值，这个选择器就可以动态加载了

我们在mounted方法中调用了this.getNodes()方法，就是在进入该页面前就调用这个方法，获取第一层的数据

handleItemChange方法,每次点击选项就会传递当前节点，查询子节点

getNodes方法解释

• 定义的两个变量idArea：当前节点的value值，sizeArea：当前节点的深度，就是树的深度
• 判断当前节点的深度，记录深度和value值

if (!val) {
    idArea = null;
    sizeArea = 0
} else if (val.length === 1) {
    idArea = val[0];
    sizeArea = val.length // 3:一级 4:二级 6:三级
} else if (val.length === 2) {
    idArea = val[1];
    sizeArea = val.length; // 3:一级 4:二级 6:三级
}

• 访问后台回去第一层的数据

this.axios.get('http://localhost:8080/competence1', {
          params: {}
        }).then(response => {
          let Items = response.data.list;

• 判断当前节点是否为第一层，是第一层进行赋值，遍历了查询的List集合，因为后面还有子节点，所以需要占位

if (sizeArea === 0) { // 初始化 加载一级 省
            console.log("sizeArea:"+sizeArea);
            this.cascaderData = Items.map((value, i) => {
              return {
                id: value,
                name: value,
                cities: []
              }
            })
          }

• 如何根据当前节点加载对应的内容,先判断深度

else if (sizeArea === 1) { // 点击一级 加载二级 市

• 先遍历绑定的集合，与当前节点的id比较，拿到它的孩子节点

 this.cascaderData.map((value, i) => {
            if (value.id === val[0]) {

• 确保该节点的没有子节点

if (!value.cities.length) {

• 请求后端，参数：当前节点的value

this.axios.get('http://localhost:8080/competence2', {
                    params: {competenceName:idArea}
                  }).then(res=>{
                    let result = res.data.list;

• 遍历获取的List集合，赋值给当前节点的子节点

value.cities = result.map((value, i) => {
                      return {
                        id: value,
                        name: value
                      }
                    })