如何获取到element ui 中Cascader 级联选择器里label的值

抠脚小弟

于 2020-06-08 09:05:59 发布

阅读量2.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue技术项目相关文章

本文链接：https://blog.youkuaiyun.com/ldoit/article/details/106611841

vue技术项目相关文章专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何在不同Element UI版本中获取Cascader组件的选中值。在2.9.2版本前，可通过this.$refs[关联组件名].currentLabels获取；2.9.2后，使用getCheckedNodes()方法，单选情况下，通过this.$refs.myCascader.getCheckedNodes()[0].pathLabels获取选中labelArray。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给 cascader 组件一个别名，然后用 this.$refs[关联组件名].currentLabels 就能取到选中的 labels

https://www.jianshu.com/p/29b...

<el-cascader
            ref="myCascader"
            placeholder="可输入地区名字搜索，例如：北京"
            @change="onProvincesChange">
</el-cascader>
    
          
onProvincesChange(item) {
  console.log(item, this.$refs['myCascader'].currentLabels)
}

以上大概是 2.9.2 版本之前可用的方法

（根据 issues 2.7.2版本是能用的）

在 2.9.2 后官方新增了 getCheckedNodes() 方法

查看官方文档

该方法返回选中节点的 array，如果是单选的话，使用

this.$refs.myCascader.getCheckedNodes()[0].pathLabels

即可拿到选中的 labelArray