el-cascader 点击获取更多数据

最新推荐文章于 2024-09-14 10:00:18 发布
最新推荐文章于 2024-09-14 10:00:18 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： Element 文章标签： js es6 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuyu_2019/article/details/121535520
版权
这篇博客介绍了如何在 Vue.js 应用中利用 Element UI 的 el-cascader 组件获取选中节点的数据。通过监听 change 事件并调用 getCheckedNodes 方法，可以获取到用户的设备查询选择，并更新相关设备 ID、序列号和名称等信息。
摘要由CSDN通过智能技术生成

重点语句

let getCheckedNodes = this.$refs.cascader.getCheckedNodes()[0]

<el-cascader ref="cascader"
             placeholder="设备查询"
             :options="treeData"
             filterable
             @change="handleChange"></el-cascader>


handleChange () {

  let getCheckedNodes = this.$refs.cascader.getCheckedNodes()[0]
  let data = getCheckedNodes.data
  console.log(data)

  this.currentID = data.deviceId
  this.deviceSerialId = data.deviceSerialId
  this.currentName = data.label // 切换当前选中的设备名称
  this.deviceSerialName = data.deviceSerialName// 当前设备的设备类型

},
yuyu_2019
关注
专栏目录
el-cascader点击获取label
qq_30351747的博客
09-09 682
el-cascader点击获取label 使用getCheckedNodes() 方法 获取到的是数组 格式：[‘北京’] 或者 [‘北京’，‘朝阳区’] this.$refs['cas'].getCheckedNodes()[0].pathLabels
关于vue使用el-cascader获取值的问题【超详细】
浅浅记录一下前端开发常见问题和解决方案
03-08 5830
文章详细记录了通过vue 的el-cascader组件，如何获取到级联值的信息？以及如何回显的问题？
element-ui cascader级联选择器，使用getCheckedNodes()获取选择对象参数信息，及如何使用props自定义设置value、label、children的键名
热门推荐
Umbrella_Um的博客
02-01 2万+
需求一： 我需要在cascader级联选择后，拿到当前选择对象的其他参数信息，而不单单只获取到选择的value值 如上图，ElementUI 提供了这个获取所选节点的信息函数 getCheckedNodes，正好解决了我需要当前节点的其他信息，不单单只是选择时返回的 value 值 需求二： 后端返回的数组，并不是cascader级联选择器默认的value，label，children怎么修改成当前的键值来循环呢？ 但至于怎么用，文档都没有给出例子，所以这里补充一下用法，直接上代码： <t
el-cascader选中当前节点,获取当前value并且获取其父级value
aiiiszrh的博客
12-31 6965
elementUI提供了 getCheckedNodes 这个方法 可以拿到父级id 但会出现下边这个问题 当我们半选的时候 拿到的只有最后一级的value 是拿不到父级的value。这咋整呢 试一下用递归 <template> <div class="app-container"> <div class="ranges"> <div style="display:flex"> <span class="is.
el-cascader应用
qq_41562817的博客
01-26 1146
（1）判断时机：点击单选框的时候（2）由于val值为kjg这个变量，无法判断是否为最后一级节点，因此获取使用getCheckedNodes方法获取当前选中节点（3）是否最后一级的条件，自由发挥，可以根据lazyLoad里设置的数据结构判断if (!},
elementui中el-cascader级联选择器回显解决办法（稳定有效）
m0_54883970的博客
02-26 2313
1、场景描述 这里展示的是已经获得后台传回来的需要回显数据，在级联选择器中进行回显，并且能保持稳定回显 2、解决办法 2.1、在el-cascader标签中加入 :key=“modalKey” v-model=“choose” 2.2、在data中定义 data() { //定义变量和初始值 return{ modalKey: 0, choose: [], } }, 2.3、赋值 参考以下代码 methods:{ //创建具体的方法， getInfo() { course.getCours
cascader 动态加载 回显_Vue（二十八）el-cascader 动态加载 - 省市区组件
weixin_39568889的博客
12-21 449
v-model="selectedOptions"placeholder="请选择省市区":options="cascaderData"@active-item-change="handleItemChange":props="{value: 'id',label: 'name',children: 'cities'}">exportdefault{name:'my-provinces',d...
获取el-cascader内部数据
08-11
您可以使用以下方法获取 el-cascader 内部的数据： 1. 获取 el-cascader 组件的引用：可以通过 ref 属性或者通过组件选择器获取到 el-cascader 组件的引用。例如，如果您使用的是 Vue.js 框架，可以给 el-cascader ...
el-cascader 点击父级子集无法正常回显
09-11
如果你遇到了在使用 el-cascader 时点击父级子集无法正常回显的问题，可能的原因和解决方法如下： 1. 确保数据格式正确：el-cascader 需要正确格式的数据源才能正常工作。确保你提供的数据是一个数组，每个元素包含...
el-select数据过多懒加载的解决(loadmore)
10-16
2. 使用v-el-select-loadmore指令来绑定加载更多数据的方法。当select组件的滚动条滚动到底部时触发该方法。 3. 在组件的mounted生命周期钩子中，开始初始化加载数据。使用formData对象来管理分页信息，包括页码...
el-cascader的getCheckedNodes获取值为空
weixin_45890564的博客
04-12 5654
描述:在表格中动态插入行时，每行中的el-cascader触发change事件时获取节点getCheckedNodes为空，原以为是dom节点未及时更新，使用$nextTick可解决问题，但发现并未起作用 表格添加多条时el-cascader的change事件只有最后条getCheckedNodes能获取到数据,想到用this.refs["cascader"][index].getCheckedNodes()去解决，可是发现this.refs["cascader"][index].getCheckedNo
el-cascader给默认值后在mounted中getCheckedNodes获取不到节点值
qq_40179700的博客
09-03 4277
el-cascader的option值是异步函数获取的，给一个默认值，在mounted中getCheckedNodes得到的结果却是空数组
element-ui cascader级联选择器,获取对象Object(getCheckedNodes())
I大俊
12-11 1万+
element-ui cascader级联选择器,获取对象Object(getCheckedNodes())
element-plus表单中使用el-cascader组件，对应的getCheckedNodes方法获取到的是上次触发的值
qq_38426136的博客
06-17 379
el-cascader 组件的内部状态在调用 getCheckedNodes 方法时还没有同步, 用nextTick 确保 DOM 更新完成后再调用 getCheckedNodes 确保获取的是当前最新的选中节点。
el-cascader： 使用getCheckedNodes()获取当前节点是ok的,但是当级联菜单模糊搜索时getCheckedNodes()获取当前节点为空
最新发布
jieweiwujie的博客
09-14 273
【代码】el-cascader： 使用getCheckedNodes()获取当前节点是ok的,但是当级联菜单模糊搜索时getCheckedNodes()获取当前节点为空。
element 的 el-cascade 组件如何获取级联选中label和value值
@必意玲
08-07 1万+
value 好获取，主要是label，我百度了半天都是说用 this.$refs[关联组件名].currentLabels 可以获取，但是这个方法已经过期了。 还是自己看文档才发现使用 getCheckedNodes 方法的节点获取。完整的 this.$refs["refSubCat"].getCheckedNodes()[0].label 1. 效果 2. 代码 <el-cascader...
el-cascader级联选择器动态加载时的回显解决-源码解析
huiaixing的博客
12-27 8349
解决cascader级联选择器组件动态加载的回显问题和搜索功能
Web前端之Element级联选择器的那些事、获取label的值、getCheckedNodes、cascader、ref
我的"CSDN"博客主页地址：https://mengjian.blog.csdn.net/
04-09 1300
Web前端之Element级联选择器的那些事、获取label的值、getCheckedNodes、cascader、ref
getCheckedNodes用法 el-cascader获取label及父级值
m0_49578914的博客
04-13 4367
直接上代码 在数据发生改变的时候进行获取 @change方法 其中data为数据信息
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值