目录一.基本使用二.进阶使用1.如何获取最后一级选项的值2.如何让级联选择器的输入框只展示最后一级三.实战1.场景描述2.实现步骤①设计后端返回值Vo②编写controller③编写service④编写mapper层⑤在前端通过发送axios请求后端数据3.展示效果结语一.基本使用复制如下代码template div classm-4 p级联选择器/p el-cascader v-modelvalue :optionsoptions :propsprops changehandleChange / /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-levelsfalse属性即可。运行效果三.实战1.场景描述应用场景当我们添加一个医技项目时要选择该项目的所属科室。举例头部核磁共振这个项目应该属于【外科】下的【神经外科】这个科室。此时我们就可以通过级联选择器来完成【外科/神经外科】的选择。2.实现步骤①设计后端返回值Vo②编写controller③编写serviceservice层serviceImpl层//查询前端【级联查询科室】所需的结果集(注意Cascade是级联的意思) public ListCascadeOfDept queryCascadeOfDept() { //1.先查询大类科室如外科、内科 ListCascadeOfDept cascadeOfDepts deptCategoryMapper.queryAllDeptCategoryOfCascade(); //2.遍历所有大类科室 for(CascadeOfDept cascadeOfDept :cascadeOfDepts){ //2.1根据大类科室的id查询旗下所有的小类科室 ListCascadeOfDept cascadeOfDepts1 departmentMapper.queryAllDeptByCategoryIdOfCascade(cascadeOfDept.getValue()); //2.2将旗下小类科室装入大类科室中 cascadeOfDept.setChildren(cascadeOfDepts1); } //3.返回所有大类科室每个大类科室都装着小类科室 return cascadeOfDepts; }④编写mapper层⑤在前端通过发送axios请求后端数据3.展示效果结语以上就是Cascader 级联选择器组件的使用在项目中可以浅浅使用一下。喜欢本篇文章的话可以留个免费的关注~~