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

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

han32686年前 (2020-07-22)VUE9340


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://hanwenblog.com/post/18.html

分享给朋友:

相关文章

基于Vue的移动端图片裁剪组件(Clipic)可自动压缩

基于Vue的移动端图片裁剪组件(Clipic)可自动压缩

安装:Bashnpm install --save clipic使用代码:Markup<template>     ...

基于vue的移动端图片裁剪压缩处理

效果展示:原作者介绍:传送门原作者github:传送门基于原作者封装的组件:传送门基于原作者+vant UI封装的组件:传送门...

简单理解Vue中的nextTick

简单理解Vue中的nextTick

官方文档:Vue 在更新 DOM 时是异步执行的,为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM...

VUE拖放排序,好用的vue拖拽插件vuedraggable拖放排序

VUE拖放排序,好用的vue拖拽插件vuedraggable拖放排序

1  安装依赖:npm i -S vuedraggable2. 使用组件:html:    <draggable&...

在vue中实现element-ui的el-dialog弹框拖拽

1.在assets/js/文件夹下新建directives.js 文件:import Vue from 'vue' // v-dialog...