el-cascader联级选择器在v-for循环中获取节点对象的正确使用姿势

最新推荐文章于 2024-07-02 17:13:20 发布
最新推荐文章于 2024-07-02 17:13:20 发布
阅读量1.9k 收藏 2
点赞数 2
分类专栏： Vue elementUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gemming_/article/details/107776419
版权
当在Vue的v-for循环中使用el-cascader时，遇到getCheckedNodes方法不可用的错误。通过深入研究，找到了正确的解决方案。
摘要由CSDN通过智能技术生成

在这里插入图片描述

el-cascader在v-for中使用refs.xxx.getCheckedNodes()会报getCheckedNodes is not a function ，研究了很久，终于搞出了正确姿势：

//v-for循环时要有item和index ，将index传入el-cascader的change事件：
<el-row v-for(item,i) in orgList :key="index">
<el-cascader ref
最低0.47元/天 解锁文章
Gem__
关注
专栏目录
使用element中el-cascader级联选择器：实现省市区街道筛选、动态懒加载以及回显
12-22
全国省市区街道的json数据
【Element-UI】 el-tree 报错 getCheckedNodes is not a function
weixin_41852038的博客
10-13 9159
按照element上的文档来使用element 里面的树形组件 使用后 突然发现报错 “TypeError: this.$refs.tree.getCheckedNodes is not a function” 黑人问号脸？？？ 排查原因 把 ref 打印一下 发现竟然有五个tree 突然想到 el-tree 是通过for 循环出来的 所以造成了有五个 一样的ref 知道原因就好解决了 解决方案一： 只获取某个tree里面的值 this.$refs.tree[0].getCheckedNodes(
el-cascader级联选择器搜索选中后，获取节点信息为空（已解决）
FilterXX的博客
10-25 3437
踩坑： 官方提供的getCheckedNodes()方法适用于手动点击节点获取信息，但并不能获取搜索后出现的查询结果的节点信息 查询结果如上↑，选中后获取不了节点信息。 随后在网上查了一下，发现可以使用getNodeByValue方法获取，如下： <!-- HTML --> <el-cascader ref="cascader" filterable clearable v-model="formobj.value" :options="parentoptions"
关于 element-ui el-cascader 数据回显问题的解决方案
幸运小男神的博客
07-02 620
这两天在使用 el-cascader 控件时，后端日期的数据如“2023-05-06”前端需要按照“年-月-日”的形式分割成三级联动，因为数据库保存的是完整的日期，前端数据回显时需要对后端返回的数据进行处理。
el-cascader 搜索选中后使用 getCheckedNodes() 获取不到当前勾选节点值
qq_47525635的博客
06-03 1529
在 el-cascader 中搜索并选中值后，通过触发 change 事件发现，可以拿到该勾选节点的值（由所选选项的 value 值组成的数组），但是由于需求还需要用到选中节点的 label 值，直接使用 getCheckedNodes() 获取选中节点值为 [ ]，致使没办法拿到 label 值。就是这样，这个问题的发现还是通过业务的测试发现的，因为我都是 一级一级的选。，人家是直接搜索选中的。
elementUI级联选择器（Cascader）clearCheckedNodes无效的解决方法=＞即.clearCheckedNodes is not a function
qq_36126031的博客
08-27 1万+
问题 最近在使用 elementUI级联选择器（Cascader）发现clearCheckedNodes（）的使用不是想象中的那样。 报错：TypeError: this.$refs.tree.clearCheckedNodes is not a function 目的 清空级联选择器的内容和选中高亮的状态 正确打开方式！！！！ // 清空选中的节点 this.$refs.tree.$refs.panel.clearCheckedNodes(); // 设置为空可以让节点不高亮显示 thi
el-tree 在 v-for 中获取不到 getCheckedNodes
qq_37236395的博客
05-19 3528
element-ui 中 el-tree 在 v-for 中使用，获取不到 getCheckedNodes() 和 getCheckedKeys()，报错：Error in v-on handler: “TypeError: this.$refs.tree.getCheckedNodes is not a function” <el-tree :data="layerControl" show-checkbox node-key="id" :props="defaultProps"
解决：this.$refs引用子组件报错 is not a function
草巾冒小子的博客
11-13 2万+
解决this.$refs引用子组件出现undefined或者is not a function的错误。
el-cascader模糊搜索时getCheckedNodes()获取不到选中的节点
qq_43765727的博客
08-30 1429
把getCheckedNodes()改为改为getNodeByValue()
el-cascader的getCheckedNodes获取值为空
weixin_45890564的博客
04-12 5637
描述:在表格中动态插入行时，每行中的el-cascader触发change事件时获取节点getCheckedNodes为空，原以为是dom节点未及时更新，使用$nextTick可解决问题，但发现并未起作用 表格添加多条时el-cascader的change事件只有最后条getCheckedNodes能获取到数据,想到用this.refs["cascader"][index].getCheckedNodes()去解决，可是发现this.refs["cascader"][index].getCheckedNo
vue el-cascader所需要的省市区街道联动的数据格式
07-26
今天找到了大半天，没找到合适的 vue el-cascader 省市区街道4级联动的数据，并且支持维护修改的。 于是自己做了一个。 代码非常简单，重要的符合这个格式的数据，这就是我这个懂后端程序员的优势了。
uniapp-cascader
11-14
uniapp-cascader是一个专门为uniapp框架设计的级联选择器，它可以无缝地运行在H5和各种小程序环境中，如微信小程序、支付宝小程序等。它的主要功能包括自定义选择样式、支持两级或三级级联，并且可以设置为单选或...
element-plus---Cascader三级联动地区选择---json数据
08-19
2. **配置Cascader组件**：在模板中，添加`<el-cascader>`元素，并设置其`options`属性为`areas`，以加载我们的地区数据。还可以根据需求设置其他属性，如`props`（指定各个字段名）、`clearable`（是否可清除选择）...
vue级联选择器的getCheckedNodes用法
热门推荐
macangyewangs的博客
07-01 3万+
<el-cascader :options="menudata" :props="defaultPropsa" v-model="val" clearable @change="menuchange" ></el-cascader> data(){ return{ defaultPropsa: { //三级联动 children: "children", label: "lab.
vue如何获取tree当前选中的节点,vue element ui 的tree组件，选中节点并实时显示
weixin_30391889的博客
03-27 4031
element ui的数组件，需要实现的功能是，选中节点，点击“预览”按钮，在右侧显示叶子节点的信息使用的getCheckedNodes()方法获得选中节点，然后把节点存在一个变量里，遍历节点，只留下叶子节点的名称，在右侧展示3.目前存在的问题， 第一次选中2个节点，点击预览，没有问题，显示2行信息第二次再选中2个节点，点击预览，显示了6行，即第一次点击按钮时生成的html和第二次生成的四个htm...
el-cascader多选级联动态渲染和回显
ROBIN_uuo的博客
09-18 6233
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
elementUi——Cascader 级联选择器渲染数据很多时卡顿问题解决
yehaocheng520的博客
06-11 1万+
上周在做后台管理系统时，有用到了级联选择器，这个级联选择器主要用于分组展示的数据，比如省市区三级两级联动等。 elementUi中的cascader级联选择器官网链接：https://element.eleme.cn/#/zh-CN/component/cascader 使用方法也是比较的简单，主要有以下几个参数： 一个最基本的级联选择器代码如下： <el-cascader v-model="value" :options="options" @change="handleChange">&l
element级联选择器中模糊搜索时getCheckedNodes()获取不到当前节点
NancyFyn的博客
09-03 2837
踩了个坑… 使用getCheckedNodes()获取当前节点是ok的,但是当级联菜单模糊搜索时getCheckedNodes()获取当前节点为空.开始以为是element的版本问题,但是经查验并不是 当使用getCheckedNodes()方法获取不到节点时,我们可以使用反查的方法getNodeByValue(),去找当前节点 this.$refs[`cascader${index}`][0].panel.getNodeByValue(value) 使用此方法可以反查到节点信息,从而获取到需要的数据
el-cascader多选级联选择器 只有最后一级多选
最新发布
07-04
ECharts Cascader（El-Cascader）是一个基于ECharts封装的级联选择器组件，它是Element UI库中的一个组件，用于展示层级结构的数据，并支持用户进行多级选择。当你提到“只有最后一级多选”，这通常是指Cascader组件...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值