级联选择器el-cascader ——实现树形数据下的，选择任意一级和只展示选中的数据

原创 已于 2022-02-18 19:14:46 修改 · 4.6k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #elementui

于 2022-02-18 19:01:02 首次发布
本文档详细解析了Element UI中级联选择器的配置与使用，特别是`show-all-levels`、`props`、`checkStrictly`和`expandTrigger`等关键属性。当`show-all-levels`设为`false`时，仅显示最后一级选择；通过设置`checkStrictly`为`true`，允许选择任意层级；`expandTrigger`控制子菜单的展开方式；`children`指定选项的子选项属性。尽管展示值为单个，但绑定值仍为包含所有路径的数组，要获取与展示数据一致的字符串，可取数组最后一个元素。
部署运行你感兴趣的模型镜像

element文档上面对于这些功能是有介绍的，但是文档写的不是很清楚，而且是多个例子，没有进行整合，这是我使用后的一个例子。
我这里的需求是可以选择每一级，，并且只显示选择的哪一级数据。
在这里插入图片描述
在这里插入图片描述
show-all-levels设置为false的时候显示的就是选择的最后一级
props是级联选择器的配置项
checkStrictly为true的情况下可以遵守父子节点不互相关联，可以选择任意一级
expandTrigger是控制次级菜单的展开方式
children是指定选项的子选项为选项对象的某个属性值
这样配置好之后，虽然展示的值是单个的，但是绑定的值还是一个拥有全部路径的数组，假如想得到一个和展示的数据一样的字符串，获取绑定值这个数组的下标为数组长度-1的数据就行。

您可能感兴趣的与本文相关的镜像

Yolo-v8.3

Yolo-v8.3

Yolo

YOLO（You Only Look Once）是一种流行的物体检测和图像分割模型，由华盛顿大学的Joseph Redmon 和Ali Farhadi 开发。 YOLO 于2015 年推出，因其高速和高精度而广受欢迎

级联选择el-cascader可以选中任意一项，选中文字即选中整项
qq_37635012的博客
02-28 1872
修改样式：不能加 scope 也可以放在全局样式上，要修改的样式前面要加上自定义的样式名。
Vue - Element UI 级联选择器 el-cascader 组件设置点击 label 文字直接选中，无需点击圆形单选框选中（解决开启 “单选模式“ 后无法通过点击整行直接选中的问题）
🏆 前端领域优质创作者
01-30 5298
vue，elementui，el-cascader，Cascader级联选择器，checkStrictly:true怎么点击文字选中效果，elementUI级联选择器设置checkStr选择任意一级选项,只能点单选框选中不能点label文字行，点文字没反应无法选中，级联选择器点击文字选择，隐藏前面的单选框，el-cascader点击文字选择，只能点击圆圈才能选中，隐藏单选框并且点击整行直接选中，怎么点击文字行选中，如何点击每行的文字就能实现选中，怎么点文字就选中，实现点击label标题就选择，并且选中后
奇葩功能实现：级联选择框组件el-cascader实现同一级的二级只能单选，但是一级可以多选
yorcentroll的博客
07-11 8346
但是其实还有一个小问题，那就是用户还是能看到面板闪了一下的，因为被关闭了又打开了一次。 但是本人已经不想折腾， 谁有本事谁来解决这个问题。希望有大神看到最后，能伸出援手，给出更完美的方案，谢谢！
使用element-UI Cascader组件，实现第一级单选选,第二级，第三级，子级可以多选
卡卡罗特的博客
10-25 5785
最近开发过程中，遇到需求测一个需求，就是级联选择器，需要多选；参照网上内容，自己整理了一下功能实现；2. 在第一层切换的时候，如果第一次分类改变了，把已有的值清空。思路：1.把第一层的复选框去掉。
el-cascader回显只选中不显示的问题
mkbird的博客
06-30 4398
先看代码 因为el-cascader的v-model绑定的必须是数组所以在我点击对应页面发起请求的时候，将需要的值push到cityCascader中 此时就会出现标题的问题，我的cityCascader的数据是符合要求的，但是级联选择框没有默认数据，只有默认选中解决方法是，不使用数组的push方法，而是直接重新赋值 此时就可以默认显示啦...
Element-ui： el-cascader 级联选择器 可以单独选择任意一级选项，去掉单选按钮
qq_40184218的博客
08-09 6313
目标： 1、vue项目中需要使用el-cascader组件，由于官方有单选框，所以需要根据业务去掉单选框点击文字就可以选择任意一级的内容。 效果图如下： 期望：（可以选择任何一级，有三级情况下，想选择二级就选择二级，并且去掉单选框） 步骤如下： 1.先设置父子节点取消选中关联，从而达到选择任意一级选项的目的 代码： <el-cascader :props="{ checkStrictly: true }" popper-class='自定义类名' clearable></el-casc
Vue3 - Element Plus 级联选择器 el-cascader 组件设置点击 label 文字直接选中，无需点击圆形单选框选中（解决开启 “单选模式“ 后无法通过点击整行直接选中的问题）
🏆 前端领域优质创作者
01-30 1万+
vue3，elementplus，el-cascader，Cascader级联选择器，checkStrictly:true怎么点击文字选中效果，elementplus级联选择器设置checkStr选择任意一级选项,怎么点击文字行选中，如何点击每行的文字就能实现选中，怎么点文字就选中，实现点击label标题就选择，只能点单选框选中不能点label文字行，点文字没反应无法选中，级联选择器点击文字选择，隐藏前面的单选框，el-cascader点击文字选择，只能点击圆圈才能选中，隐藏单选框并且点击整行直接选中，
vue2/3+element - 将级联选择器el-cascader修改为“点击文字就能选中“效果，单选/多选模式下点击label整行都可以直接选中，复选框多选模式下解决只能点击图标才能选中的问题
高级前端工程师
07-23 3954
vue2，vue3，element plus，级联选择器，el-cascader，点击文字就能选中，如何修改成点label就能选中，单选，多选，复选框，单选框，模式，饿了么组件库，无法通过点击整行直接选中的问题，点击文字行就能选择后弹框收起，选中完弹框无法收起，级联选择 点击文本选中 多选，不生效，有问题，原来的功能受影响，点击文字可选中去掉单选按钮选中后菜单收起，ElementUI Cascader 级联选择器实现点击文本选中，懒加载的数据怎么办，动态数据请求，多选模式下点击label文本选择，点击文本直
精选资源
使用element中el-cascader级联选择器：实现省市区街道筛选、动态懒加载以及回显
12-22
全国省市区街道的json数据
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列表是动态的怎么回显，赋值后，不回显怎么办，数据还没加载怎
el-cascader 级联选择器 选择任意一级选项 点击收起，点击label选中
蒲小若的博客
05-09 2627
https://www.cnblogs.com/whoamimy/p/12488790.html
el-cascader
蒙蒙细雨的博客
08-19 9627
1.el-cascader报错Cannot read property ‘level‘ of null 2.动态加载数据以及数据回显问题 <el-cascader v-model="regionInfo.id" v-if="cascaderShow" ref="invoiceCascader" :props="propsCascader" style=
elementUI库 Cascader 级联选择器 选择任意一级选项，去掉单选按钮
张小胖
05-15 5222
最下面有 完整案例，不想看心理历程的可以直接到最下面复制代码 目标效果： vue项目中需要使用el-cascader组件，可以选择任意一级的内容 预想效果图： （有三级情况下，想选择二级就选择二级） 遇到的问题： 使用 使用官方案例的 （多选 单选框）直接点击 小圆点，点击文字没有效果 想直接点击文字可以选中，如果有三级也随便打开三级，并且移除掉单选按钮 解决方案： 解决问题前，我们需要知道这里其实有两个问题 解决可以任选一个选项 解决点击文字即可选中，并移除单...
【Elementui】el-cascader连级选择器只回显根节点元素，且重复只显示一次
aliuyu422的博客
07-08 576
el-cascader连级选择器个性化回显
使用Element-UI中的el-cascader 实现可以任意选择一项，以及遇到的坑
m0_61317636的博客
08-03 6282
现在我们要求可以选择任意一项，查阅官方文档 发现 使用 就可以达到我们的效果，但是 注意重点来了...至于原因 大家可以看这个 (13条消息) elementUi Cascader 级联选择器如何选择任意一级，以及所遇到的问题_WhiteSean的博客-优快云博客_elementui级联选加载一级上边介绍的方法并没有什么卵用，大家只参考原因就行了，方便大家发散思维。既然知道了原因那么解决起来也是事半功倍看一下代码： 最主要的就是上边三句代码，那这三句怎么实现即要隐藏单选框又要把选择器收起呢，
element-plus的Cascader 级联选择器之懒加载选择任意一级选项，点击文字可以选中节点
weixin_44849938的博客
03-28 1336
element-plus联级选择器懒加载选择任意级点击文字选中节点
关于element-ui cascader级联选择器，选择任意一级选项设置默认值的问题
shirlene_fan的博客
06-21 9227
element-ui cascader默认单选只能选择叶子节点，也就是最末端的节点，目前客户需要所有节点可选，这个element-ui cascader的api提供了解决方案，但同时留了个坑 在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。启用该功能后，可让父子节点取消关联，选择任意一级选项。——by Element原文 写上后是这样的： 多了个选择框并且只能点选择框选中，这样看似乎没啥问题，但是。。。。。你会发现原来的默认值不能用了，正常情况下的单选，你只要给一个i
【Cascader 级联选择器，可选择任意一级后自动收回】
小香菜子的博客
05-31 975
top: -18px;border: 0;
关于el-cascader只渲染一层问题
weixin_58896221的博客
10-31 1417
<el-cascader v-model="addform.goods_cat" :options="catelist" :props="cateprops" @change="handleChange" ></el-cascader> ------------------------------------------------------ cateprops: { // 级联规则 value: 'cat_id', label: 'cat_name', ch
级联选择器(el-cascader)选中数据时获取选中的对象数据
最新发布
09-06
在Element UI的`el-cascader`级联选择器中，可通过`@change`事件和`getCheckedNodes`方法来获取选中的对象数据。 ### 利用`@change`事件 `@change`事件会在选中值发生变化时触发，它的回调函数会传入当前选中的值，通常是一个数组，代表选中项的路径值。可以结合级联选择器的`options`来找到对应的对象数据。 示例代码如下： ```vue <template> <div> <el-cascader :options="options" @change="handleChange" ></el-cascader> </div> </template> <script> export default { data() { return { options: [ { value: 'zhinan', label: '指南', children: [ { value: 'shejiyuanze', label: '设计原则', children: [ { value: 'yizhi', label: '一致' } ] } ] } ] }; }, methods: { handleChange(value) { let currentOptions = this.options; const selectedObject = []; for (let i = 0; i < value.length; i++) { const currentValue = value[i]; const found = currentOptions.find(item => item.value === currentValue); if (found) { selectedObject.push(found); currentOptions = found.children || []; } } console.log(selectedObject); } } }; </script> ``` 在上述代码里，`handleChange`方法接收选中的值数组`value`，接着遍历该数组，在每一级`options`中查找对应值的对象并添加到`selectedObject`数组里，最终输出选中的对象数据。 ### 利用`getCheckedNodes`方法 `getCheckedNodes`方法可以直接获取选中的节点对象。要调用此方法，需给`el-cascader`添加`ref`。 示例代码如下： ```vue <template> <div> <el-cascader ref="cascaderRef" :options="options" @change="handleChange" ></el-cascader> </div> </template> <script> export default { data() { return { options: [ { value: 'zhinan', label: '指南', children: [ { value: 'shejiyuanze', label: '设计原则', children: [ { value: 'yizhi', label: '一致' } ] } ] } ] }; }, methods: { handleChange() { const checkedNodes = this.$refs.cascaderRef.getCheckedNodes(); const selectedObjects = checkedNodes.map(node => node.data); console.log(selectedObjects); } } }; </script> ``` 在这个例子中，`handleChange`方法调用`getCheckedNodes`获取选中的节点对象，再通过`map`方法将节点对象的数据提取出来，存于`selectedObjects`数组并输出。
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值