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<String> 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<String> 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代码

<template>
  <el-cascader
    v-model="selectedOptions" placeholder="请选择省市区"
    :options="cascaderData"
    @active-item-change="handleItemChange"
    :props="{
      value: 'id',
      label: 'name',
      children: 'cities'
    }"
  ></el-cascader>
</template>

<script>
  export default {
    name: 'my-provinces',
    data() {
      return {
        departmentOptions: [],
        cascaderData: [],
        selectedOptions: []
      }
    },
    methods: {
      getNodes(val) {
        let idArea;
        let sizeArea;
        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;
          console.log(Items);
          if (sizeArea === 0) { // 初始化 加载一级 省
            console.log("sizeArea:"+sizeArea);
            this.cascaderData = Items.map((value, i) => {
              return {
                id: value,
                name: value,
                cities: []
              }
            })
          }
          else if (sizeArea === 1) { // 点击一级 加载二级 市
            this.cascaderData.map((value, i) => {
              if (value.id === val[0]) {
                if (!value.cities.length) {
                  this.axios.get('http://localhost:8080/competence2', {
                    params: {competenceName:val.toString()}
                  }).then(res=>{
                    let result = res.data.list;
                    console.log("=====:"+result);
                    value.cities = result.map((value, i) => {
                      return {
                        id: value,
                        name: value
                      }
                    })
                  });

                }
              }
            })
          }
        }, error => {
          console.log(error)
        })
      },
      handleItemChange(val) {
        console.log("点击内容："+val);
        this.getNodes(val)
      }
    },
    mounted() {
      this.getNodes()
    }
  }
</script>

<style scoped>

</style>

• :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
                      }
                    })