Element UI学习3--Cascader 级联选择器

最新推荐文章于 2025-06-03 10:41:24 发布
最新推荐文章于 2025-06-03 10:41:24 发布
阅读量1.4k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： element ui vue 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanrabbit/article/details/112304316
这篇博客详细介绍了Element UI中的Cascader组件，包括基础用法、多选模式、选择任意一级选项的实现、自定义节点内容以及级联面板的使用。通过示例展示了如何配置各种属性以满足不同需求，如改变触发子菜单的方式、开启多选模式、自定义节点显示等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、基础用法

1、默认 click 触发子菜单

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

<script>
export default {
    data(){
        return{
            value:[],
            options:[
                {
                    value:'zhejiang',
                    label:'浙江',
                    children:[
                        {
                            value:'hangzhou',
                            label:'杭州',
                            children:[
                                {
                                    value:'yuhang',
                                    label:'余杭'
                                },
                                {
                                    value:'xiaoshan',
                                    label:'萧山'
                                },
                                {
                                    value:'binjiang',
                                    label:'滨江'
                                },
                                {
                                    value:'gongshu',
                                    label:'拱墅'
                                }
                            ]
                        },
                        {
                            value:'ningbo',
                            label:'宁波',
                            children:[
                                {
                                    value:'jiangbei',
                                    label:'江北'
                                },
                                {
                                    value:'zhenhai',
                                    label:'镇海'
                                },
                                {
                                    value:'beilun',
                                    label:'北仑'
                                }
                            ]
                        }
                    ]
                },
                {
                    value:'jiangxi',
                    label:'江西',
                    children:[
                        {
                            value:'shangrao',
                            label:'上饶',
                            children:[
                                {
                                    value:'poyang',
                                    label:'鄱阳'
                                },
                                {
                                    value:'yugan',
                                    label:'余干'
                                },
                                {
                                    value:'yushan',
                                    label:'玉山'
                                },
                                {
                                    value:'wannian',
                                    label:'万年'
                                },
                                {
                                    value:'wuyuan',
                                    label:'婺源'
                                }
                            ]
                        }
                        
                    ]
                }
            ]
        }
    },
    methods:{
        handleChange(value){
            console.log(value)
        }
    }
}
</script>

如图：
在这里插入图片描述
2、属性show-all-levels定义了是否显示完整的路径，将其赋值为false则仅显示最后一级

<div class="block">
            <span class="demonstration">默认 click 触发子菜单</span>
            <el-cascader
              v-model="value"
              :options="options"
              @change="handleChange"
              :show-all-levels="false">
            </el-cascader>
        </div>

如图：
在这里插入图片描述
3、通过props.expandTrigger可以定义展开子级菜单的触发方式。

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

如图：
在这里插入图片描述

2、多选

1、默认显示所有Tag
可通过 props.multiple = true 来开启多选模式

<div class="block">
            <span class="demonstration">默认显示所有Tag</span>
            <el-cascader
               :options="options"
               :props="props"
               clearable>
            </el-cascader>
        </div>

<script>
export default {
    data(){
        return{
            props:{multiple:true},
            options:[{
                value: 1,
                label: '浙江',
                children:[{
                    value: 2,
                    label: '杭州',
                    children:[
                        { value: 3, label: '余杭' },
                        { value: 4, label: '拱墅' },
                        { value: 5, label: '萧山' }
                    ]
                },
                {
                    value: 6,
                    label: '宁波',
                    children:[
                        { value: 7, label: '江北' },
                        { value: 8, label: '镇海' },
                        { value: 9, label: '北仑' }
                    ]
                }
                ]
            },
            {
              value: 10,
              label: '江西',
              children:[{
                  value: 11,
                  label: '上饶',
                  children:[
                    { value: 12, label: '鄱阳' },
                    { value: 13, label: '余干' },
                    { value: 14, label: '婺源' },
                    { value: 15, label: '玉山' }
                  ]
              },
              {
                  value: 16,
                  label: '南昌',
                  children:[
                    { value: 17, label: '青山湖' },
                    { value: 18, label: '红谷滩' },
                    { value: 19, label: '高新' },
                    { value: 20, label: '向塘' }
                  ]
              }
              ]  
            }
            ]
            }
            }
            }

如图：
在这里插入图片描述
2、折叠展示Tag
使用collapse-tags来折叠Tag

<div class="block">
            <span class="demonstration">折叠展示Tag</span>
            <el-cascader
               :options="options"
               :props="props"
               clearable
               collapse-tags>
            </el-cascader>
        </div>

如图：
在这里插入图片描述

3、选择任意一级选项

1、单选选择任意一级选项
可通过 props.checkStrictly = true 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。

<div class="block">
            <span class="demonstration">单选选择任意一级选项</span>
            <el-cascader
              :options="options"
              :props="{ checkStrictly: true }"
              clearable></el-cascader>
        </div>

如图：
在这里插入图片描述
2、多选选择任意一级选项

/div> -->
         <div class="block">
            <span class="demonstration">多选选择任意一级选项</span>
            <el-cascader
              :options="options"
              :props="{ multiple: true,checkStrictly: true }"
              clearable></el-cascader>
        </div>

如图;
在这里插入图片描述

4、自定义节点内容

可以通过scoped slot对级联选择器的备选项的节点内容进行自定义，
scoped slot会传入两个字段 node 和 data，
分别表示当前节点的 Node 对象和数据。

<el-cascader :options="options">
            <template slot-scope="{ node, data }">
               <span>{{ data.label }}</span>
               <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
            </template>
        </el-cascader>

如图：
在这里插入图片描述

5、级联面板

级联面板是级联选择器的核心组件，与级联选择器一样，有单选、多选、动态加载等多种功能。

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

如图：
在这里插入图片描述

vue3 - element-plus组件库el-cascader级联选择器，“动态数据懒加载+回显/编辑时自动选中对应节点“ 问题，多选复选框、单选框级联选择器如何让数据回显？数据是动态加载回显咋办
高级前端工程师
06-28 1万+
elementPlus，vue3，element plus el-cascader 回显，级联选择器，回显，懒加载，el-cascader 动态加载选项、编辑时数据回显问题 、单选不加载下一级节点，级联选择器动态懒加载以及回显，解决el-cascader回显失败问题，三级联动数据回显，省市区回显，el-cascader 动态加载，编辑时数据回显，Element-plus Cascader级联选择器动态加载模式下数据回显时的问题，el-cascader列表是动态的怎么回显，赋值后，不回显怎么办，数据还没加载怎
element-ui中 Cascader 级联选择器 动态加载
weixin_38371427的博客
12-02 427
第一步：添加 el-cascader 组件标签 <el-cascader v-model="cityVal" :options="cityoptions" placeholder="请选择行政区划" :props="props" clearable ></el-cascader> 第二步：添加 props 属性 props: { // expandTrigger:'hover', checkStrictly:true, lazy: true,
使用el-cascader注意事项
cw_csdn的博客
06-26 674
使用expand-change去获取父节点，当直接选中节点值时并不会触发expand-change事件，这样就获取不到相应的父节点。解决方法：将change事件和el-cascader自带的方法getCheckedNodes搭配使用即可。
详解element-ui级联菜单（城市三级联动菜单）和回显问题
01-19
代码最下面 各项的参数截图 代码如下 <el-cascader v-model=ruleForm.censusLand style=width:180px;padding-left:7px;width:270px placeholder=请选择省市区 :options=cascaderData1 @expand-change=censusLandChange :props={ va
element级联地址选择器
最新发布
m0_61261153的博客
06-03 859
从接口获取已有地址字符串（如 “河北 石家庄”），拆分为名称数组后递归查找对应的。当用户选择地区时，将选中的。
element el-cascader el-select @change expand-change自定义参数传递和接收
涂涂
05-05 3908
方法一： 参数传递 <el-cascader v-model="value" :options="List" @expand-change="handleChange($event,'222')" /> <el-cascader v-model="value" :options="List" @change="handleChange($event,'222')" /> 参数接收 handleChange(value, path) => {
element级联列表 CascaderPanel Slots props使用
huangmin113659的专栏
06-22 1万+
CascaderPanel Slots <el-cascader v-model="addForm.supplier" :options="options_supplier" :props="{ value: 'id',label:'name',children:'accounts' }" @change="handleChange"/>
011_Cascader级联选择器
aihiao的专栏
02-21 6307
1. Cascader级联选择器 1.1. 当一个数据集合有清晰的层级结构时, 可通过级联选择器逐级查看并选择。 1.2. Cascader属性 参数 说明 类型 可选值 默认值 value / v-model 选中项绑定值 无 无 无 options 可选项
ElementUI Form：Cascader 级联选择器
ChinaDragon10的博客
02-17 1933
ElementUI Form：Cascader 级联选择器
element-ui Cascader 级联选择器多级禁用
weixin_70955790的博客
11-02 1102
【代码】【无标题】element-ui Cascader 级联选择器多级禁用。
基于vue+element-ui实现Cascader级联选择器+Table树形数据
椰卤工程师的个人博客
11-13 2365
开发进度提前50%，啊，真香。 下面，看图说话 Table树形数据 Cascader级联选择器 功能实现+详细代码 Cascader级联选择器 options属性指定选项数组即可渲染出一个级联选择器，所以后端接口返回的数据结构要保持一一致性，这样处理起来会省很多事。 element官网给出的options需要的数据格式： options: [{ value: 'zhinan', label: '指南', children: [{
element-china-area-data：Element UI && antd Cascader级联选择器中国省市区三级，二级联动optiondata
02-06
Element UI中国省市区级联数据 安装 npm install element-china-area-data -S 在线示例 使用 import { provinceAndCityData , regionData , provinceAndCityDataPlus , regionDataPlus , CodeToText , TextToCode }...
Element UI CascaderPanel级联组件使用和踩坑总结
baorant24的博客
01-15 3209
Element UI CascaderPanel级联组件使用和踩坑总结
element ui 级联选择器
moonla3的博客
12-28 434
<el-cascader v-model="ruleForm.levelNo" :options="optionsArr" @change="handleChange" :show-all-levels="false" style="width: 120px" ..
关于vue使用el-cascader获取值的问题【超详细】
浅浅记录一下前端开发常见问题和解决方案
03-08 9346
文章详细记录了通过vue 的el-cascader组件，如何获取到级联值的信息？以及如何回显的问题？
el-cascade入门学习
qq_40765784的博客
05-16 3576
学习内容 1.el-cascade的使用, 其中v-model对应的是数组，options中的key值固定，若label,value,children,disabled 2.@change方法的方法参数对应选择的级联的value数组 3.:props="{expandTrigger:'hover'}"触碰选项可展示出子选项，无需点击 4.clearable实现清空数据 5.:show-all-levels='false'实现只显示叶子节点值 6.:props="{multiple:true}"实现可以多..
el-cascader 动态加载选项、编辑时数据回显问题 、单选不加载下一级节点、点击标签选中
热门推荐
风间琉璃c
03-24 3万+
el-cascader 动态加载选项 以及编辑时数据回显问题
动态懒加载级联选择器el-cascader输入及回显
lijingyu001的博客
09-06 1522
elementui文档提到的lazyLoad懒加载方法，回显做不出来，最后使用了简单粗暴的方法，欢迎大神指点。@change为选中节点事件，@expand-change为点击节点事件。
element中el-table，type=‘expand‘展开行，@expand-change=“ “事件动态数据刷新问题
weixin_45786429的博客
06-13 3318
按照element的table里面的方法，行属性设置了type=‘expand’，也在table里面添加了@expand-change="expandChange"时间监听展开行事件，在监听时间里面动态获取数据赋值给里面展开的table，写项目的时候，经常遇到el-table内嵌动态table的功能需求，也就是table内嵌table，同时里面的table数据是动态获取的，动态获取动态展开。问题出现了，第一次点开没数据，第二次点开才有数据。第二步：动态获取内嵌表数据，动态赋值当前行。如果这俩方法都不好使。
element-ui中el-cascader级联选择器多选判断是否是全选
06-28
在Element UI中的`el-cascader`级联选择器组件，如果需要实现多选并判断是否所有选项都被勾选为全选状态，你可以使用`@change`或`@input`事件监听用户的交互。当你获取到`value`（用户选择的值）时，可以通过遍历这个数组，检查每个元素的状态来判断是否全选。 以下是一个简单的示例： ```html <template> <el-cascader v-model="selectedValues" :options="options" multiple @change="checkAllSelected" ></el-cascader> </template> <script> export default { data() { return { selectedValues: [], // 存放用户选择的值 options: ... // 你的级联选项数据 }; }, methods: { checkAllSelected(values) { if (values.length > 0) { let allChecked = true; for (const value of values) { if (!value.checked) { allChecked = false; break; } } this.isAllSelected = allChecked; } else { this.isAllSelected = false; } } }, computed: { isAllSelected() { return this.selectedValues.every(value => value.checked); } } }; </script> ``` 在这个例子中，当`@change`触发时，`checkAllSelected`方法会被调用，检查`selectedValues`数组中的所有元素是否都有`checked`属性为`true`。`isAllSelected`计算属性会根据这个结果更新，表示是否全选。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值