通常 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事件:
在这里插入图片描述
打印结果如下:
在这里插入图片描述

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐