element 级联选择获取label 同时获取value和label element 级联选择回显

前情提要

在elementUI的Cascader级联选择组件中，获取value大家应该都懂，一般我们会将value设置为id ;

<el-cascader
            size="small"
            :options="listAll"
            placeholder="请选择或输入"
            filterable
            ref="cascaderAddr"
            :props="{value: 'id'}"  //设置为id
            clearable v-model="form.address" @change="handleChange">
          </el-cascader>

BUT !!!文档并没有表明如何同时获取label的值，props也只能是一个字符串，无法将label拼接。

具体实现

只要2行代码即可获取选中的各级label组成的数组
1、首先在组建中设置ref属性 如：ref=“cascaderAddr”；
2、在change事件打印this.$refs[‘cascaderAddr’].getCheckedNodes()[0].pathLabels既可获取；
见下方代码

<el-cascader
            size="small"
            :options="listAll"
            placeholder="请选择或输入"
            filterable
            ref="cascaderAddr"
            :props="{value: 'id'}"  //设置为id
            clearable v-model="form.address" @change="handleChange">
          </el-cascader>
//js
handleChange(value) {
      console.log(value); //打印出所选级联id，类型为数组
      let casLabelVal = this.$refs['cascaderAddr'].getCheckedNodes()[0].pathLabels;
      console.log(casLabelVal ); //打印出所选级联label,类型为数组
      }

就酱紫实现啦，如果你有更好的实现方法，欢迎勾搭！hiahia