当前位置：首页 > news >正文

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

news 2026/4/17 17:44:08

一.基本使用

二.进阶使用

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; }