element-ui的el-cascader怎么样可以同时获取到选中的value和label?

Question

使用el-cascader的时候@active-item-change触发的handleItemChange方法貌似只能够获取到绑定到value上的值，如我把code绑定在value，选择北京的时候获取到的是 [10000]。
有没有什么方法可以同时获取到props里绑定的label和value？

 <el-cascader  class="newinput" :options="options" @active-item-change="handleItemChange" :props="props"></el-cascader>

export default {
name: 'app',
  data(){
      return{
      options: [{
          name: '北京',
          code:10000
          children: []
        }, {
          name: '天津',
          code:10001
          children: []
        },
        {
          name: '河北省',
          code:10002
          children: []
        }
        ]
       ,
        props: {
          label:'name',
          value:'code',
          children: 'children'
        },
      }
  },
  methods:{
     handleItemChange(val) {
        console.log(val);
    }
  }
}

Answer 1

可以拿到velue值之后进行遍历options，拿到对应的label值

Answer 2

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

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

Answer 3

找到了更好的办法 在源数据里组装一个
all: {value: value, label: label}
然后配置props: {value: 'all'}
取出来的值就是[{value: 选中值的value, label: 选中值的label}]

PS: 关于拿不到默认值的问题，我投机取巧的使用了placeholder，值为：
:placeholder="city || '请选择'"
然后在cascade上加上样式：

:class="{'city-cascade': type==1}"

.city-cascade .el-input__inner::placeholder {
  color: #333 !important;
}

Answer 4

给cascader组件赋值一个别名ref="myCascader" 2.9.2 版本之前可用的方法`jsx
this.$refs['myCascader'].currentLabels
在 2.9.2 后官方新增了 getCheckedNodes() 方法
this.$refs.myCascader.getCheckedNodes()[0].pathLabels

Answer 5

建议获取数据之后在构造一个自定义的value：{label：'北京',code:10000}

Answer 6

今天刚刚写了 也是地区三级联动 我是拿到地区值后遍历全部地区 然后取到地区名

Answer 7

直接使用props配置就可以了啊