el 级联懒加载

github代码：
https://github.com/githubHelloWorl/el-plus-loading-front/tree/master1
https://github.com/githubHelloWorl/el-plus-loading-back/tree/master240229

参考资料

在此基础上改写：MyBatis-Plus实现增删改查
https://blog.csdn.net/m0_66545700/article/details/135165929

封装axios：
https://blog.csdn.net/m0_66545700/article/details/135774441

element ui级联选择器懒加载的使用（调用自己的接口）以及生成级联选择器所需要的数据结构
https://blog.csdn.net/qq_43725946/article/details/110366564

elementUI级联懒加载（Cascader），动态数据，使用后端接口数据
https://blog.csdn.net/weixin_47602884/article/details/127282997

LambdaQueryWrapper的使用
https://blog.csdn.net/weixin_65109614/article/details/126233093

element-plus渲染：
https://element-plus.gitee.io/zh-CN/component/cascader.html

编写utils转换
https://www.jb51.net/article/252548.htm

entity内部转vo
https://blog.51cto.com/u_16213447/8745974

快速入门

例子一：使用自己的数据

页面信息：

前端代码：

<template>
  <div class="m-4">
    <p>Child options expand when clicked (default)</p>
    <el-cascader v-model="value" :options="options" @change="handleChange" />
  </div>
  <div class="m-4">
    <p>Child options expand when hovered</p>
    <el-cascader
      v-model="value"
      :options="options"
      :props="props"
      @change="handleChange"
      />
  </div>
</template>

<script setup>
  import { ref } from "vue";
  const value = ref([]);
  const props = {
    expandTrigger: "hover",
  };
  const handleChange = (value) => {
    console.log(value);
  };
    const options = [
    {
      value: "guide",
      label: "Guide",
      children: [
        {
          value: "disciplines",
          label: "Disciplines",
          children: [
            {
              value: "consistency",
              label: "Consistency",
            },
            /*  自己定义数据  */
            ...
          ],
        },
      ],
    },
];
</script>

例子二：使用prop渲染

页面信息：

前端代码：

<template>
  <el-cascader :props="props" @change="handler"/>
</template>

<script setup>
let id = 0
const props = {
  lazy: true,
  lazyLoad(node, resolve) {
    // 获得node的层级
    const { level } = node
    console.log("level = " + level)
    setTimeout(() => {

      // 给 nodes 赋值
      const nodes = Array.from({ length: level + 1 }).map((item) => ({
        value: ++id,
        label: `Option - ${id}`,
        leaf: level >= 2,
      }))
      
      console.log("nodes = ")
      console.log(nodes)
      
      // 使用 nodes 渲染
      resolve(nodes)
    }, 1000)
  },
}

const handler = (value) => {
  console.log(value)
}
</script>

前端向后端发送数据

前端使用 prop 渲染规则

当选中某一级时，动态加载该级下的选项。
通过lazy开启动态加载，并通过lazyload来设置加载数据源的方法。
lazyload方法有两个参数，
第一个参数node为当前点击的节点，第二个resolve为数据加载完成的回调(必须调用)。
为了更准确的显示节点的状态，还可以对节点数据添加是否为叶子节点的标志位
(默认字段为leaf，可通过props.leaf修改)。 否则，将以有无子节点来判断其是否为叶子节点。

页面信息：

前端代码：

<template>
  <div class="m-4">
    <p>Child options expand when clicked (default)</p>
    <el-cascader :props="props" @change="handleChange" />
  </div>
</template>

<script setup>
  import axios from "axios";

  const url = "/api/test1";

  const props = {
    // 是否使用懒加载
    lazy: true,
    // 懒加载调用函数
    lazyLoad(node, resolve) {

      // 构造参数,如果这里使用 { level:node.level+1 } 就会出现
      // org.springframework.web.bind.MissingServletRequestParameterException：方法参数类型 int 所需的请求参数“level”不存在
      const formData = new FormData();
      formData.append("level", node.level + 1);

      // 发送请求
      axios
        .post(url, formData)
        .then((response) => {
          if (response.data.code === 1) {

            // 过滤数据
            // 过滤规则如下
            //   如果 node.level === 0 ,此时node.data 是空的,所以 node.data.id 是 undefined,此时所有数据都可接受
            //   如果 node.level !== 0 ,此时node.data.id指代此时的节点id ,使用el.preId可指代是否是这个节点的子节点
            let nodes = response.data.data.filter(
              (el) =>  ("undefined" === typeof(node.data.id))||(el.preId === node.data.id)
            );

            // 是否是叶子结点
            nodes.map((el) => {
              el["leaf"] = (el.childrenNum === 0);
              return el;
            });

            // 渲染节点
            resolve(nodes);
          }
        })
        .catch((error) => {
          console.error("Error:", error);
        });
    },
  };

  // 当节点改变时,调用此函数
  const handleChange = (value) => {
    console.log(value);
  };

</script>

后端代码：

@PostMapping("/test1")
public Result test1(@RequestParam(value = "level") Integer level) {
    System.out.println("level = " + level);
    LambdaQueryWrapper<Cascader> lambdaQueryWrapper = Wrappers.lambdaQuery();
    lambdaQueryWrapper.eq(Cascader::getLevel, level);

    return Result.success(cascaderMapper.selectList(lambdaQueryWrapper));
}

@PostMapping("/test2")
public Result<List<Cascader>> test2(@RequestParam("level") Integer level) {
    QueryWrapper<Cascader> queryWrapper = Wrappers.query();
    queryWrapper.eq("level", level);

    return Result.success(cascaderMapper.selectList(queryWrapper));
}