目录
一.基本使用
复制如下代码：
<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;
}④编写mapper层
⑤在前端，通过发送axios请求后端数据
3.展示效果
结语
以上就是Cascader 级联选择器组件的使用，在项目中可以浅浅使用一下。
喜欢本篇文章的话，可以留个免费的关注~~