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

目录

一.基本使用

二.进阶使用

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 级联选择器组件的使用，在项目中可以浅浅使用一下。

喜欢本篇文章的话，可以留个免费的关注~~