组件-Element---Cascader（级联选择器）

最新推荐文章于 2024-12-18 14:20:43 发布
最新推荐文章于 2024-12-18 14:20:43 发布
阅读量5.2k 收藏 2
点赞数 1
分类专栏： 组件---Element 文章标签： Element
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GU_AO_SHI_TAI_DU/article/details/94546985
版权
这篇博客主要介绍了Element UI的Cascader组件，包括基础用法、禁用选项、可清空功能、仅显示最后一级、多选、任意一级选择、动态加载、可搜索及自定义节点内容等特性。同时，提到了Cascader的相关属性、事件和插槽，为使用和定制Cascader组件提供了详细指南。
摘要由CSDN通过智能技术生成

组件-Element—Cascader（级联选择器）

组件—级联选择器

  1. 基础用法
    在这里插入图片描述

    <div class="block">
  <span class="demonstration">默认 click 触发子菜单</span>
  <el-cascader
    v-model="value"
    :options="options"
    @change="handleChange"></el-cascader>
</div>
<div class="block">
  <span class="demonstration">hover 触发子菜单</span>
  <el-cascader
    v-model="value"
    :options="options"
    :props="{ expandTrigger: 'hover' }"
    @change="handleChange"></el-cascader>
</div>

<script>
  export default {
    data() {
      return {
        value: [],
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }]
      };
    },
    methods: {
      handleChange(value) {
        console.log(value);
      }
    }
  };
</script>

  2. 禁用选项
    在这里插入图片描述

    <el-cascader :options="options"></el-cascader>

<script>
  export default {
    data() {
      return {
        options: [{
          value: 'zhinan',
          label: '指南',
          disabled: true,
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
最低0.47元/天 解锁文章
vue3 - element-plus组件库el-cascader级联选择器，“动态数据懒加载+回显/编辑时自动选中对应节点“ 问题，多选复选框、单选框级联选择器如何让数据回显？数据是动态加载回显咋办
高级前端工程师
06-28 3417
elementPlus，vue3，element plus el-cascader 回显，级联选择器，回显，懒加载，el-cascader 动态加载选项、编辑时数据回显问题 、单选不加载下一级节点，级联选择器动态懒加载以及回显，解决el-cascader回显失败问题，三级联动数据回显，省市区回显，el-cascader 动态加载，编辑时数据回显，Element-plus Cascader级联选择器动态加载模式下数据回显时的问题，el-cascader列表是动态的怎么回显，赋值后，不回显怎么办，数据还没加载怎
Vue - Element UI 级联选择器 el-cascader 组件设置点击 label 文字直接选中，无需点击圆形单选框选中（解决开启 “单选模式“ 后无法通过点击整行直接选中的问题）
王佳斌
01-30 4395
vue，elementui，el-cascader，Cascader级联选择器，checkStrictly:true怎么点击文字选中效果，elementUI级联选择器设置checkStr选择任意一级选项,只能点单选框选中不能点label文字行，点文字没反应无法选中，级联选择器点击文字选择，隐藏前面的单选框，el-cascader点击文字选择，只能点击圆圈才能选中，隐藏单选框并且点击整行直接选中，怎么点击文字行选中，如何点击每行的文字就能实现选中，怎么点文字就选中，实现点击label标题就选择，并且选中后
el-cascader级联选择器数据过多分页显示
Janeisme3L的博客
10-19 3582
业务场景：一级二级数据量不多 ，一次返回，第三级数据点击二级时请求 ，第一级选项不可选，第三级选项加载出来的情况下第二级选项才能全选 问题：实现过程中发现三级数据量过多（8千多条）会造成浏览器卡死 解决：三级选项分页显示 欢迎各位小伙伴评论区多多指教 （有时间会优化，整理demo出来） 主要代码 html <el-cascader v-model="tagsFocus" :options="options" :props="propsTag" filtera...
Vue Element Cascader 级联选择器
lmf13992427957的博客
09-28 2882
因为后台返回的最后一级虽然没内容，但是是个空数组，所以会显示空白，通过递归判断是否是空数组，然后设置为undefined即可。方法changeProblemType获取的数据是个数组，若是只想要选择的该级的数据id，通过遍历该数组获取最后一个数值。级联选择器默认只能选择最后一级的，想要选择任意一级，加上属性change-on-select。特性：1.后端返回的数据格式名称跟前端需要的名称不一致：使用:props动态改变。
el-element组建库中Cascader 级联选择器强制刷新表格
最新发布
weixin_43617604的博客
12-18 321
Cascader 级联选择器 在一些复杂的table中表格中 绑定的数据发生变动 v-model数据不能显示问题 当涉及到数据联动 可以新增删除的功能表格时有两种情况。 1.如果不强制刷新表格2.强制刷新表格 在表格中添加：key 这样比页面就会被重新渲染
ElementUI —— Cascader 级联选择器
一只想躺平却不敢躺平的小菜鸟
07-11 1236
递归处理接口数据，数据格式为elementUI文档中Cascader 级联选择器options的格式
ElementUI Form：Cascader 级联选择器
ChinaDragon10的博客
02-17 1732
ElementUI Form：Cascader 级联选择器
element-ui —Cascader 级联选择器（选中方式处理）
weixin_43742167的博客
08-03 6851
element-ui —Cascader 级联选择器点击文本实现选中
cascader级联选择器
qq_42792801的博客
08-06 537
cascader级联选择器的高度问题 在你的全局css下添加以下代码即可解决问题 .el-cascader-menu { height: 300px; } /* or */ .el-cascader-panel { height: 300px !important; } 以为是请求的接口写错找了半天- _ -
Vue3 - Element Plus 级联选择器 el-cascader 组件设置点击 label 文字直接选中，无需点击圆形单选框选中（解决开启 “单选模式“ 后无法通过点击整行直接选中的问题）
王佳斌
01-30 3738
vue3，elementplus，el-cascader，Cascader级联选择器，checkStrictly:true怎么点击文字选中效果，elementplus级联选择器设置checkStr选择任意一级选项,怎么点击文字行选中，如何点击每行的文字就能实现选中，怎么点文字就选中，实现点击label标题就选择，只能点单选框选中不能点label文字行，点文字没反应无法选中，级联选择器点击文字选择，隐藏前面的单选框，el-cascader点击文字选择，只能点击圆圈才能选中，隐藏单选框并且点击整行直接选中，
el-cascader 级联选择器动态加载数据及回显数据方法（最全概括）＜grootbaby＞
热门推荐
grootbaby
07-16 1万+
当地区数据比较多时，全部获取数据速度太慢，体验不太好，改为懒加载，一级一级选择地区就能很好避免速度慢的问题。首次加载第一级数据，给出所需要的参数，因为首次加载 node.value 没有值，据此判断是不是第一级数据。当点击最后一级的时候 label 后面不会转圈圈，并把相关值赋值到选择器上。编辑弹窗展示的时候，有时候并不能正确回显，取消展示或者改变 key 值。依次类推，拿到全部层级的 code 和 name 传给后端接收使用。获取倒数第二级的数据的 name。获取倒数第三级的数据的 name。
cascaderjs级联选择器
08-12
级联选择器，当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择
Cascader 级联选择器
QZ9420的博客
12-30 649
<template> <div> <ks-dialog ref="categoryDialog" :title="dialogTitle" class="dialog-style" :visible.sync="jdCategoryVisible" :modal-append-to-body="false" :c
Vue 学习随笔系列一 -- Cascader 级联选择器
mm_0123456789的博客
03-02 3965
Cascader 级联选择器
011_Cascader级联选择器
aihiao的专栏
02-21 6175
1. Cascader级联选择器 1.1. 当一个数据集合有清晰的层级结构时, 可通过级联选择器逐级查看并选择。 1.2. Cascader属性 参数 说明 类型 可选值 默认值 value / v-model 选中项绑定值 无 无 无 options 可选项
Vue3级联选择（Cascader）
Mr Dear的博客
03-31 6643
以 Vue3选择框（Select）为基础封装的级联选择框组件，支持：禁用；禁用某一级；选择即改变；清除；搜索，自定义搜索过滤函数；自定义样式；自定义字段名；总之，功能丰富，简单易用😁😁
Vue2级联选择（Cascader）
Mr Dear的博客
12-23 9006
Vue2以 VueAmazingSelect 选择框为基础封装的级联选择框组件。
Cascader 级联选择器（三级）
叶
01-18 6981
Cascader 级联选择器（三级）
Vue级联选择器组件：elp-cascader
资源摘要信息:"elp-cascader是一个基于Vue.js框架的组件，它是结合了'element-ui'组件库和'vue-virtual-scroller'库来实现的一个级联选择器。这个组件特别适用于处理大量数据的级联选择场景，通过虚拟滚动技术，可以...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值