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

在这里插入图片描述

后台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
                      }
                    })
Logo

前往低代码交流专区

更多推荐