流行的企业网站推广赣州信息港网
目录
一.基本使用
二.进阶使用
1.如何获取最后一级选项的值？
2.如何让级联选择器的输入框只展示最后一级？
三.实战
1.场景描述
2.实现步骤
①设计后端返回值Vo
②编写controller
③编写service
④编写mapper层
⑤在前端，通过发送axios请求后端数据
3.展示效果
结语
一.基本使用
复制如下代码：
<template><div class="m-4"><p>级联选择器</p><el-cascaderv-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 级联选择器组件的使用，在项目中可以浅浅使用一下。
喜欢本篇文章的话，可以留个免费的关注~~