element级联选择器中获取当前选择node节点的两种方式

最新推荐文章于 2024-08-01 11:59:54 发布
原创 最新推荐文章于 2024-08-01 11:59:54 发布 · 9.2k 阅读 · 18 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了级联选择器中两种获取选中节点的方法：一是直接调用getCheckedNodes()，适用于常规情况；二是通过val值反查节点，解决搜索条件下的节点获取问题。这两种方法各有优劣，可根据实际需求灵活选用。

级联选择器

一.官网给出的getCheckedNodes()方法

this.$refs['cascaderAddr'].getCheckedNodes()

打印效果如下：

但是这种方式有一个弊端，就是无法获取到“搜索条件下”的node节点，打印时getCheckedNodes为undefined，这种情况下就需要用到第二种方式

二.根据获取到的val值反查

this.$refs.cascaderAddr.panel.getNodeByValue(val)

打印如下：

以上~~

el-cascader： 使用getCheckedNodes()获取当前节点是ok的,但是当级联菜单模糊搜索时getCheckedNodes()获取当前节点为空
jieweiwujie的博客
09-14 1086
【代码】el-cascader： 使用getCheckedNodes()获取当前节点是ok的,但是当级联菜单模糊搜索时getCheckedNodes()获取当前节点为空。
Element-UI级联选择器(Cascader)获取全路径Label
weixin_42592529的博客
10-16 3543
首先要说明的是,elemnt-ui上关于级联选择器提供了方法,获取节点 getCheckedNodes 此方法能够获取节点信息,但是在复杂的场景下,比如级联选择器是循环创建的. 有人可能要说了 那可以把ref的命名随机化,好了,我就是不爽这种好吧.....废话不多说先上效果 首先数据长这样 json = [ { value: "animal", label: "动物", ...
JQuery 有关于 ZTree 插件
guanhuaing
04-05 120
var zTree1; var setting; var retrunObj; setting = { check: { enable : true }, async: { enable: true, otherParam: {"conditionMap.mtType":"${conditionMap.mtType}"}, url: "${ctx}/portal...
element-ui cascader级联选择器,获取对象Object(getCheckedNodes()、currentLabels)
qq_39877681的博客
10-12 4784
element-ui cascader级联选择器,获取对象Object(getCheckedNodes()、currentLabels)
element-ui cascader级联选择器，使用getCheckedNodes()获取选择对象参数信息，及如何使用props自定义设置value、label、children的键名
Umbrella_Um的博客
02-01 3万+
需求一： 我需要在cascader级联选择后，拿到当前选择对象的其他参数信息，而不单单只获取到选择的value值 如上图，ElementUI 提供了这个获取所选节点的信息函数 getCheckedNodes，正好解决了我需要当前节点的其他信息，不单单只是选择时返回的 value 值 需求二： 后端返回的数组，并不是cascader级联选择器默认的value，label，children怎么修改成当前的键值来循环呢？ 但至于怎么用，文档都没有给出例子，所以这里补充一下用法，直接上代码： <t
Web前端之Element级联选择器的那些事、获取label的值、getCheckedNodes、cascader、ref
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
04-09 1632
Web前端之Element级联选择器的那些事、获取label的值、getCheckedNodes、cascader、ref
element-ui cascader级联选择器,获取对象Object(getCheckedNodes())
I大俊
12-11 2万+
element-ui cascader级联选择器,获取对象Object(getCheckedNodes())
Vue+ElementUI 中级联选择器Bug问题的解决
11-19
在Vue和ElementUI框架中，级联选择器（Cascader）是一个常用的功能组件，用于展示具有层级关系的数据。然而，使用过程中可能会遇到一些问题，本文将深入探讨一个关于级联选择器出现Bug的情况及其解决方案。 问题...
element级联选择器返回父节点
最新发布
05-09
在使用 Element UI 的级联选择器组件时，可以通过 `getCheckedNodes` 方法来获取当前选中的节点及其祖先节点的信息。此方法会返回一个数组，其中包含了所有被选中的节点对象以及它们的相关属性。 以下是实现获取父...
使用element的Cascader级联选择器进行地址三级联动
全易
04-02 2592
提供全国三级树形json数据，简单的组件
ElementUI Form：Cascader 级联选择器
ChinaDragon10的博客
02-17 2031
ElementUI Form：Cascader 级联选择器
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.
element-ui：获取级联下拉框选中节点的数据
m0_62646099的博客
03-30 1599
element-ui:获取级联下拉框选中节点的所有数据
element-ui cascader级联选择器获取数据方法
han8507900的博客
07-07 6380
1.给cascader组件赋值一个别名2.change事件下： const checkedNodes = this.$refs['cascaderUnit'].getCheckedNodes() console.log(checkedNodes) // 获取当前点击的节点 console.log(checkedNodes[0].data.label) // 获取当前点击的节点的label console.log(checkedNodes[0].pathLabels) // 获取由 label 组成的数组
Element ui tree树形控件获取当前节点id和父节点id
weixin_34238633的博客
03-26 1023
低版本Element ui tree树形控件获取当前节点id和父节点id的方法：点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程： 1.找到node_modules/element-ui/lib/element-ui.common.js文件 2.按Ctrl+F搜索TreeStore.prototype.getCheckedKeys这个方法，...
js中node节点操作和获取
qq_55748881的博客
01-13 1186
js的node节点操作和获取的一些详细的表述
element-plus表单中使用el-cascader组件，对应的getCheckedNodes方法获取到的是上次触发的值
qq_38426136的博客
06-17 930
el-cascader 组件的内部状态在调用 getCheckedNodes 方法时还没有同步, 用nextTick 确保 DOM 更新完成后再调用 getCheckedNodes 确保获取的是当前最新的选中节点。
el-tree在多选情况下，获取所有选中的叶子结点
weixin_37331593的博客
08-01 2162
我们在使用 `elementUI` 的`el-tree`树形插件选中节点时，通常只需要得到选中的叶子结点，不需要父节点，这样的话可以通过`getCheckedNodes`方法来获取。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木易66丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值