vue 获取el-cascader选中的label值

通常 el-cascader 绑定的model值是选中的id，有时候需要获取选中的label值，可以用以下的方法：

<template>
  <div class="container">
     <span>分类：</span>
     <el-cascader ref="cascaderMallCatergory" v-model="mallCatergoryCode" @change="handleMallCatergoryChange" :options="mallCategoryOptions" :props="props"></el-cascader>
  </div>
</template>

<script>

export default {
  name: "coupon",
  components: {
  },
  data () {
    return {      
      mallCatergoryCode: [],
      mallCategoryOptions: [
        {
          "id": "1",
          "name": "水果",
          "level": "1",
          "pid": "0",
          "status": "1",
          "subCatalogResps": [
            {
              "id": "4",
              "name": "苹果",
              "status": "1"
            }, {
              "id": "8",
              "name": "香蕉",
              "status": "1"
            }, {
              "id": "9",
              "name": "梨",
              "status": "1"
            }
          ]
        }, {
          "id": "2",
          "name": "食品",
          "level": "1",
          "pid": "0",
          "status": "1",
          "subCatalogResps": [
            {
              "id": "5",
              "name": "面条",
              "status": "1"
            }, {
              "id": "6",
              "name": "大米",
              "status": "1"
            }
          ]
        }
      ],
      // 自定义 props
      props: { label: 'name', value: 'id', children: 'subCatalogResps' }
    }
  },
  props: {
  },
  mounted () {
  },
  methods: {
    handleMallCatergoryChange () {
      if (this.mallCatergoryCode.length != 0) {       
        let arr = this.$refs['cascaderMallCatergory'].getCheckedNodes()[0].pathLabels
        console.log('mallCatergoryCode', this.mallCatergoryCode)
        console.log('arr', arr)   
      }
    }
  }
}
</script>

<style lang="less" scoped>
.container {
}
</style>

给el-cascader设置ref：cascaderMallCatergory，然后通过this.$refs['cascaderMallCatergory'].getCheckedNodes()[0].pathLabels 来获取选中的label值。

选中一个分类之后，监听change事件：

打印结果如下：