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

目录

一.基本使用

二.进阶使用

1.如何获取最后一级选项的值?

2.如何让级联选择器的输入框只展示最后一级?

三.实战

1.场景描述

2.实现步骤

①设计后端返回值Vo

②编写controller

③编写service

④编写mapper层

⑤在前端,通过发送axios请求后端数据

3.展示效果

结语


一.基本使用

复制如下代码:

html 复制代码
<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层:

java 复制代码
    //查询前端【级联查询科室】所需的结果集(注意: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 级联选择器组件的使用,在项目中可以浅浅使用一下。

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

相关推荐
谈谈叭21 天前
代码优化——基于element-plus封装组件:表单封装
开发语言·前端·javascript·性能优化·vue3·vite·element-plus
Nymph_Zhu22 天前
vue3+antV G6节点与文本框实现
vue.js·element-plus·g6
一雨方知深秋1 个月前
pnpm, eslint, vue-router4, element-plus, pinia
pnpm·pinia·element-plus·暂存区eslint·vue-router4
Lysun0013 个月前
vue3里面,事件触发一次,方法执行多次
javascript·vue.js·elementui·element-plus
飞雪金灵3 个月前
Vue3(elementPlus) el-table替换/隐藏行箭头,点击整行展开
前端·vue3·element-plus·隐藏table箭头·替换table展开箭头·点击整行展开
蟾宫曲3 个月前
在 Vue3 项目中实现计时器组件的使用(Vite+Vue3+Node+npm+Element-plus,附测试代码)
前端·npm·vue3·vite·element-plus·计时器
lulu_06324 个月前
safari 浏览器输入框 focus时不显示那一闪一闪的图标
前端·css·vue·safari·element-plus
Serenity_Qin4 个月前
vue3 + ts 使用 el-tree
前端·vue.js·typescript·vue3·element-plus
虚诚4 个月前
el-selet下拉菜单自定义内容,下拉内容样式类似表格
vue.js·element-plus·下拉菜单