vue3 element-plus中el-cascader 选中后获取label值

最新推荐文章于 2024-04-14 18:51:25 发布
最新推荐文章于 2024-04-14 18:51:25 发布
阅读量436 收藏
点赞数 1
文章标签： 前端框架 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45155785/article/details/137465648
版权


通过ref获取el-cascader组件实例 调用getCheckedNodes()方法获取已经选择的值。

1、const cascaderRef = ref();定义响应式，变量与el-cascader中ref相对应 

2、选中时chang事件可触发。

3、调用getCheckedNodes()：

【涛】哥
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue+element-ui动态生成多级表头的方法
12-29
vue+element html配置： <div id=table>{{tableData}} <el data=tabledata01 span-method=tableSpanMethod max-height=420> <el v-for='item in tableConfig' label=item.label prop='item.prop' width='item.width...
vue element 中的table动态渲染实现（动态表头）
10-15
主要介绍了vue element 中的table动态渲染实现（动态表头），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3 element plus获取el-cascader级联选择器选中的当前结点的label值 附vue2获取当前label
Taurus_666
09-16 3438
各位大佬，有时我们在处理级联选择组件数据时，不仅需要拿到id,还需要拿到label名称，但是通常组件直接绑定的是id,所以就需要我们用别的方法去拿到label,此处官方是有这个方法的，具体根据不同的element 版本进行分别处理。
获取el-cascader级联选择器选中的当前结点的label值
Avery233的博客
04-09 1万+
(注：一般级联选择器绑定的都是value值，可通过v-model绑定的值直接获取其value，当选项的label和value不一样时，此方法用于获取当前选中节点的label) 1、html代码 <el-cascader :props="areaProps" :options="areaOptions" ref="cascaderArr" v-model="areaCodeArr" @change="handleChange($event)" :></el-cas
vue3 element plus获取el-cascader级联选择器选中的当前结点的label值
最新发布
weixin_42498594的博客
04-14 571
在处理级联选择组件数据时，有时候不仅需要拿到id,还需要拿到label名称，但是通常组件直接绑定的是id,所以就需要我们用别的方法去拿到label。
el-cascader 获取label、value值
Queen_sy的博客
01-19 1688
实现数组对象中的key对应value,label对应title。3 为了获取选中数据的label。输出最后一层label和value。1 绑定对应数据实现数据的对应。
element 的 el-cascader 组件获取级联选中label和value值
z_langjitianya的博客
04-04 6687
需要给 el-cascader 加 ref 用以获取值。获取级联选择器的 label 值。
详解element-ui级联菜单（城市三级联动菜单）和回显问题
01-19
<el label=户籍所在地 prop=censusLand xss=removed> <el-cascader v-model=ruleForm.censusLand style=width:180px;padding-left:7px;width:270px placeholder=请选择省市区 :options=cascaderData1 @...
vue2.* element tabs tab-pane 动态加载组件操作
01-21
一、重要部分 1、 注意 <component is=item.content></... label=item.title name=item.name > <component is=item.content></component> </el> 2、content: ‘Jbxx’ ，其中 jbxx 是 模板 addTab (targetNam
vue element table 表格请求后台排序的方法
12-29
1、ElementUi文档已经说了，如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。 <el data=...
Element-UI中el-cascader级联选择器获取label值
Anorry的博客
03-25 1004
在el-cascader级联选择器中获取label值
element-UI级联选择器(Cascader)获取label值
m0_61103773的博客
06-07 458
this.$refs['refname'].inputValue
el-cascader的getCheckedNodes获取值为空
weixin_45890564的博客
04-12 5376
描述:在表格中动态插入行时，每行中的el-cascader触发change事件时获取节点getCheckedNodes为空，原以为是dom节点未及时更新，使用$nextTick可解决问题，但发现并未起作用 表格添加多条时el-cascader的change事件只有最后条getCheckedNodes能获取到数据,想到用this.refs["cascader"][index].getCheckedNodes()去解决，可是发现this.refs["cascader"][index].getCheckedNo
el-cascader级联选择器那些事
qq_26905813的博客
07-13 1123
使用cascader组件提供的getCheckedNodes()
element 的 el-cascade 组件获取级联选中label和value值
goodboxs的博客
01-17 594
【代码】element 的 el-cascade 组件获取级联选中label和value值。
element-plus(element-plus) Cascader 级联选择器 vue3 获取lable,value (2种情况)
F_fengzilin的博客
07-16 9576
在公司写项目时遇到的问题，由于用的是element-plus，用element-plus举例。1.采用前端静态绑定1.先绑定cascader2 .选择时触发 change事件，通过refs取值（vue2.）3.选择时触发 change事件，通过refs取值，由于vue3采用proxy封装，取值时不同（vue3.）2.采用后端异步获取绑定注意，vue3异步获取值时不要直接放到原数组，原因是vue3会自动再加一层proxy，会取不到值。以vue3为例，我是直接绑定了label1.和静态不同，获取选择数组时需要注
el-cascader给默认值后在mounted中getCheckedNodes获取不到节点值
qq_40179700的博客
09-03 4065
el-cascader的option值是异步函数获取的，给一个默认值，在mounted中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...
vue3 el-cascader获取label值
05-05
在 Vue3 和 Element-Plus 中使用 `el-cascader` 组件，可以通过 `change` 事件来获取选中的值。 例如，假设你有一个 `el-cascader` 组件如下： ```html <el-cascader v-model="selectedOptions" :options="options" @change="handleCascaderChange" ></el-cascader> ``` 其中，`selectedOptions` 是一个数组，表示当前选中的值，`options` 是一个数组，表示可选的选项。`handleCascaderChange` 是一个方法，用于处理 `change` 事件。 在 `handleCascaderChange` 方法中，可以通过遍历 `selectedOptions` 数组来获取每一级选中的值，并将它们组合成一个字符串，作为 `el-cascader` 的 `label` 值。例如： ```js export default { data() { return { selectedOptions: [], options: [ { value: 'zhinan', label: '指南', children: [ { value: 'shejiyuanze', label: '设计原则', children: [ { value: 'yizhi', label: '一致' }, { value: 'fankui', label: '反馈' } ] } ] } ] } }, methods: { handleCascaderChange(value) { let label = '' for (let i = 0; i < value.length; i++) { const option = this.options[i].children.find(item => item.value === value[i]) label += option.label + (i < value.length - 1 ? ' / ' : '') } console.log('选中的值：', value) console.log('选中的标签：', label) } } } ``` 在上面的代码中，我们使用 `find` 方法来查找每一级选中的值对应的选项，然后将它们的 `label` 值拼接在一起，并在每一级之间添加斜杠分隔符。最终的结果就是一个字符串，表示当前选中的标签。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值