element-plus中Cascader级联选择器组件的使用

news2025/11/3 12:32:44

一.基本使用

二.进阶使用

1.如何获取最后一级选项的值？

2.如何让级联选择器的输入框只展示最后一级？

三.实战

1.场景描述

2.实现步骤

①设计后端返回值Vo

②编写controller

③编写service

④编写mapper层

⑤在前端，通过发送axios请求后端数据

3.展示效果

结语

一.基本使用

复制如下代码：

<template>
  <div class="m-4">
    <p>级联选择器</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',
          },
          {
            value: 'feedback',
            label: 'Feedback',
          },
          {
            value: 'efficiency',
            label: 'Efficiency',
          },
          {
            value: 'controllability',
            label: 'Controllability',
          },
        ],
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'side nav',
            label: 'Side Navigation',
          },
          {
            value: 'top nav',
            label: 'Top Navigation',
          },
        ],
      },
    ],
  },
  {
    value: 'resource',
    label: 'Resource',
    children: [
      {
        value: 'axure',
        label: 'Axure Components',
      },
      {
        value: 'sketch',
        label: 'Sketch Templates',
      },
      {
        value: 'docs',
        label: 'Design Documentation',
      },
    ],
  },
]

</script>

<style scoped>


</style>

运行效果：

代码解读：

①v-model：级联选择器的值，是一个数组，格式为[一级选择，二级选择，三级选择.....]

举例：

②:options是给级联选择器绑定的数据源，该数据源是一个对象数组，每个对象代表一个选项，有value、label、children三部分。

③:props指定了选择触发的条件，是鼠标悬停还是左键单击。

④@change指定了选项变化时，触发的事件。

二.进阶使用

1.如何获取最后一级选项的值？

问题描述：

解决方案：

由于value是一个数组，此时value[0]代表第一级，value[1]代表第二级，value[2]代表第三级。因此通过value[2]就能获取最后一级的值。

展示效果：

2.如何让级联选择器的输入框只展示最后一级？

问题描述：

解决方案：

给级联选择器添加:show-all-levels="false"属性即可。

运行效果：

三.实战

1.场景描述

应用场景：当我们添加一个医技项目时，要选择该项目的所属科室。

举例：头部核磁共振这个项目，应该属于【外科】下的【神经外科】这个科室。此时我们就可以通过级联选择器，来完成【外科/神经外科】的选择。

2.实现步骤

①设计后端返回值Vo

②编写controller

③编写service

service层：

serviceImpl层：

    //查询前端【级联查询科室】所需的结果集(注意：Cascade是级联的意思)
    public List<CascadeOfDept> queryCascadeOfDept() {
        //1.先查询大类科室（如：外科、内科）
        List<CascadeOfDept> cascadeOfDepts = deptCategoryMapper.queryAllDeptCategoryOfCascade();
        //2.遍历所有大类科室
        for(CascadeOfDept cascadeOfDept :cascadeOfDepts){
            //2.1根据大类科室的id，查询旗下所有的小类科室
            List<CascadeOfDept> cascadeOfDepts1 = departmentMapper.queryAllDeptByCategoryIdOfCascade(cascadeOfDept.getValue());
            //2.2将旗下小类科室，装入大类科室中
            cascadeOfDept.setChildren(cascadeOfDepts1);
        }
        //3.返回所有大类科室（每个大类科室，都装着小类科室）
        return cascadeOfDepts;
    }