获取elementui中 联级选择器中的lable的值

最新推荐文章于 2024-06-03 22:20:09 发布
最新推荐文章于 2024-06-03 22:20:09 发布
阅读量642 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44453127/article/details/106836670
版权 
	handleChange() {
		var cityName = this.$refs['refHandle'].getCheckedNodes()[0].pathLabels[
		  this.$refs['refHandle'].getCheckedNodes()[0].pathLabels.length - 1
		]
		this.dataForm.areaName = cityName
		console.log(cityName)
	},

handleChange为 el-cascader 组件中的@change=“handleChange” 的值
refHandle 为 el-cascader 组件中的ref="refHandle"的值
this.$refs[‘refHandle’].getCheckedNodes()[0].pathLabels.length - 1是取数组的最后一项

weixin_44453127
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【vue 项目】有关cascader任选一级、字段名不同、同时获取value和label值、回显（推父节点）等问题解决
Aohanzzz的博客
10-25 3979
有关cascader的一些用法
element-ui中Tree树形控件节点的设置与回显
zhou_mu_mu_xi的博客
08-26 6489
在给角色设置权限的时候，后端要求把子节点和父节点的id要一起传递过去， 当父节点的状态为选中时，说明子节点也被全部被选中, this.$refs.tree.getCheckedNodes()；可以获取到父节点id在内的所有节点id， 当父节点的状态为半选中时,this.$refs.tree.getCheckedNodes(),只能获取被选中的子节点的id, 此时利用this.$refs.tree.getHalfCheckedNodes()，可以获取到半选中状态的父节点id 在回显时，后端会把角色所拥有的权
ElementUI tree 解决父节点选中，回显选中所有子节点问题
嘿嘿
08-10 4255
一、当前面临的问题 当tree中被选择的节点提交给后端时发现没有带父节点的选项 向后端提交了 部分子节点 和 部分子节点的父节点 的数据，当回显的时候，该父节点下全部被选中 二、问题解决 第一个问题的解决方法如下： this.$refs.tree.getCheckedNodes(false,true).map(i => i.id) getCheckedNodes 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false
el-cascader 搜索选中后使用 getCheckedNodes() 获取不到当前勾选节点值
最新发布
qq_47525635的博客
06-03 878
在 el-cascader 中搜索并选中值后，通过触发 change 事件发现，可以拿到该勾选节点的值（由所选选项的 value 值组成的数组），但是由于需求还需要用到选中节点的 label 值，直接使用 getCheckedNodes() 获取选中节点值为 [ ]，致使没办法拿到 label 值。就是这样，这个问题的发现还是通过业务的测试发现的，因为我都是 一级一级的选。，人家是直接搜索选中的。
elementui半选状态下获取父节点
weixin_45766506的博客
07-23 380
1、如果只是获取勾选的节点那么用： tree为dom上ref对应的值 this.$refs.tree.getCheckedNodes() 但是以上的方式无法获取选项的父节点 2、获取勾选的所有关联节点（所有的半选节点也一并获取）： tree为dom上ref对应的值 this.$refs.tree.getCheckedNodes(false,true) 使用2的方式应该是需要elementui的一定版本，低版本的可能不行，这里提示一下 ...
ASP.NET Lable中进行换行解决方案
10-27
个问题,应该算是很简单的问题，可说实在的，折腾了2个小时的时候，后面整出来的时候，真坑爹呢。现在把这个过程给大家，希望可以给大家一个提醒
vue select 获取value和lable操作
01-21
vue select控件在选择时需要把id和name两个值都获取到，实现方案如下： select控件代码 物资类型： prop=supplyType> <Select v-model=detailData.supplyType :label-in-value=true placeholder=请选择物资...
element-ui 关于获取select 的label值方法
12-29
在某些场景下，还是需要在获得label的值跟Value值的。 vue获取值的方式： 库位 prop=goodsLocationId> 货位地址 change=changeLocationValue> <el-option v-for=lo in locations :l
element-UI级联选择器(Cascader)获取label值 - 代码篇
热门推荐
草巾冒小子的博客
03-26 4万+
element-ui级联选择器(Cascader)获取级联对象 ：主要是想获取:label值、value值 效果图预览： 代码参考如下： <el-cascader ref="cascaderAddr" :options="addressOptions" change-on-select v-model="form.areaCode" @blur="handleAddressFu...
JK——vue+element 级联选择器（数据处理）
weixin_58412143的博客
04-13 1350
1、方法一 <el-cascader v-model="value" ref="cascaderAddr" :options="this.treedata" :props="optionProps" clearable @visible-change="getTree()" @change="setTree()"></el-cascader> return { value: [], opt
Element的el-cascader级联选择器组件获取选中的label
qq_24612793的博客
10-28 1619
给级联器ref=“myCascader” 方法一：给cascader组件赋值一个别名ref=“myCascader” （注意：2.9.2 版本之前可用的方法) 1 this.$refs[‘myCascader’].currentLabels 方法二：在 2.9.2 后官方新增了 getCheckedNodes() 方法 1 this.$refs.myCascader.getCheckedNodes()[0].pathLabels ...
ElementUi中级联选择器(根据后台返回来数据处理显示在级联选择器中),处理最后一级为空白情况
清风的博客
05-19 2929
ElementUi中级联选择器(根据后台返回来数据处理显示在级联选择器中),处理最后一级为空白情况 //封装函数方便调用 handleData(data, newarr) { const len = data.length for (let i = 0; i < len; i++) { //如果子级存在,并且有数据 if (data[i].children && data[i].children.length &gt
element-ui cascader级联选择器获取数据方法
han8507900的博客
07-07 6133
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 组成的数组
elementui 极联选择器获取当前label
weixin_43478592的博客
07-12 684
今天遇到个问题，需要获取极联选择器当前label，以下方案完美解决： <el-cascader ref="testCascader" v-model="selvalue" :options="typesinfo" :props="{ expandTrigger: 'hover', label: 'name', value: 'id' }" placeholder="职位类型" @change="nameChange" > </el-cascader> data(){
vue中常用的一些命令
m0_51660523的博客
08-11 389
后端传的参数需要在前端进行一一对应，可以通过if else进行判断，但也可以进行map对应，具体用法如下： 这种情况适用于id数量少比如1-10： <template> <span>{{front[backend.id]}}</sapn> </template> <script> import ... export default { data() { return { fro
element-UI级联选择器默认选择是value(也就是id)想要获取label(也就是name值)
qq_40630924的博客
06-13 3815
<el-cascader :options="optionsMessage" clearable filterable :props="defaultProps" @change="changeCity" ref="cascaderAddr" v-model="citySelected"> </el-cascader> changeCity(item) { ..
获取antdesign级联选择器中选中的lable
04-08
可以通过以下步骤获取Ant Design级联选择器中选中的label： 1. 获取级联选择器的值，即选中的所有选项的key值（可以使用`onChange`事件获取）； 2. 根据key值，从数据源中查找对应的label值； 3. 将所有选中的label...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值