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

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

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:'北仑'
最低0.47元/天 解锁文章
爱喝奶茶的小韩
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3 - element-plus组件库el-cascader级联选择器，“动态数据懒加载+回显/编辑时自动选中对应节点“ 问题，多选复选框、单选框级联选择器如何让数据回显？数据是动态加载回显咋办
高级前端工程师
06-28 1901
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 3764
vue，element ui，el-cascader，Cascader级联选择器，checkStrictly:true怎么点击文字选中效果，element UI级联选择器设置checkStr选择任意一级选项,只能点单选框选中不能点label文字行，点文字没反应无法选中，级联选择器点击文字选择，隐藏前面的单选框，el-cascader点击文字选择，只能点击圆圈才能选中，隐藏单选框并且点击整行直接选中，怎么点击文字行选中，如何点击每行的文字就能实现选中，怎么点文字就选中，实现点击label标题就选择，并且选中后
详解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级联列表 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"/>
【前端疑难杂症bug——el-cascader手动设置值、页面不回显bug】
最新发布
爪爪爪爪哇的博客
08-09 451
使用el-cascader级联选择器，选择器之外有快速选择的功能。
011_Cascader级联选择器
aihiao的专栏
02-21 6048
1. Cascader级联选择器 1.1. 当一个数据集合有清晰的层级结构时, 可通过级联选择器逐级查看并选择。 1.2. Cascader属性 参数 说明 类型 可选值 默认值 value / v-model 选中项绑定值 无 无 无 options 可选项
ElementUI Form：Cascader 级联选择器
ChinaDragon10的博客
02-17 1586
ElementUI Form：Cascader 级联选择器
Element UI CascaderPanel级联组件使用和踩坑总结
baorant24的博客
01-15 2126
Element UI CascaderPanel级联组件使用和踩坑总结
element ui Cascader 级联选择器
Solitary的博客
03-01 694
后台用的递归查询，不过查询查询出来的数据与前端需要的字段不对应 前端需要 value 和 label 后台没有对应到字段， 前端可以做处理 initPost(){ this.tableLoading = true; this.getRequest('/organizational-structure/selectPost').then(resp=> { if (resp && resp.status == 200) { ..
element-ui中 Cascader 级联选择器 动态加载
weixin_38371427的博客
12-02 294
第一步：添加 el-cascader 组件标签 <el-cascader v-model="cityVal" :options="cityoptions" placeholder="请选择行政区划" :props="props" clearable ></el-cascader> 第二步：添加 props 属性 props: { // expandTrigger:'hover', checkStrictly:true, lazy: true,
Element-ui： el-cascader 级联选择器 可以单独选择任意一级选项，去掉单选按钮
m0_61083409的博客
03-03 4820
目标： 1、vue项目中需要使用el-cascader组件，由于官方有单选框，所以需要根据业务去掉单选框点击文字就可以选择任意一级的内容。 效果图如下： 期望：（可以选择任何一级，有三级情况下，想选择二级就选择二级，并且去掉单选框） 步骤如下： 1.先设置父子节点取消选中关联，从而达到选择任意一级选项的目的 代码： <el-cascader :props="{ checkStrictly: true }" popper-class='自定义类名' clearable></el-casc
element ui 级联选择器
moonla3的博客
12-28 386
<el-cascader v-model="ruleForm.levelNo" :options="optionsArr" @change="handleChange" :show-all-levels="false" style="width: 120px" ..
element el-cascader el-select @change expand-change自定义参数传递和接收
涂涂
05-05 3483
方法一： 参数传递 <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) => {
关于vue使用el-cascader获取值的问题【超详细】
浅浅记录一下前端开发常见问题和解决方案
03-08 5265
文章详细记录了通过vue 的el-cascader组件，如何获取到级联值的信息？以及如何回显的问题？
el-cascade入门学习
qq_40765784的博客
05-16 3425
学习内容 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 2万+
el-cascader 动态加载选项 以及编辑时数据回显问题
动态懒加载级联选择器el-cascader输入及回显
lijingyu001的博客
09-06 1409
elementui文档提到的lazyLoad懒加载方法，回显做不出来，最后使用了简单粗暴的方法，欢迎大神指点。@change为选中节点事件，@expand-change为点击节点事件。
element中el-table，type=‘expand‘展开行，@expand-change=“ “事件动态数据刷新问题
weixin_45786429的博客
06-13 2957
按照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`（用户选择的值）时，可以通过遍历这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值