当前位置:首页 > 经验笔记 > VUE > 正文内容

ElementUI的el-cascader级联选择器组件获取选中的label | VUE

han32685年前 (2020-07-22)VUE8860


image.png


例如上图,需要拿到全部/设备:设备123

<el-cascader
  ref="myCascader"
  :options="optionss"
  @change="handleAreaChange">
</el-cascader>

给el-cascader组件设置ref为myCascader

设置change事件handleAreaChange

在handleAreaChange事件使用ref属性获取选中的值

handleAreaChange(val){
      console.log(val)
      console.log(this.$refs.myCascader.getCheckedNodes()[0].pathLabels )
      // var label = this.$refs.myCascader.getCheckedNodes()[0].label
      // var value = this.$refs.myCascader.getCheckedNodes()[0].value
      
 },

handleAreaChange携带的val参数,获取的json数据中的value,我们需要的是label

console.log(this.$refs.myCascader.getCheckedNodes()[0].pathLabels )//打印的就是label 注意UI版本我用的是2.13.2

image.png

下一篇解决 for循环无法使用getCheckedNodes()的问题





扫描二维码推送至手机访问。

版权声明:本文由瀚文博客发布,如需转载请注明出处。

本文链接:https://www.hanwenblog.com/post/18.html

分享给朋友:

相关文章

vue 去除前后空格trim的使用方法

一、使用trim修饰符<input v-model.trim = "massage" >二、使用filter过去属性 <...

vue引入本地json数据文件

    data() {         return {...

element-ui Tree 树形控件实现单选 最简方法VUE

做项目时需要用到Tree树形控件单选但是Tree组件没有单选设置,网上找了几个方法不太适应,看了官网文档发现很简单 代码如下      &n...

vue强制更新$forceUpdate()

vue强制更新$forceUpdate()

vue强制更新$forceUpdate()添加this.$forceUpdate();进行强制渲染,效果实现。搜索资料得出结果:因为数据层次太多,render函数没有自动更新,需手动强制刷新。调用强制...

vue跳转时打开新窗口的方法

    1、<vue-link>标签实现新窗口打开    官方文档中说 v-link 指令被 <rou...