vue 获取el-cascader选中的label值
通常 el-cascader 绑定的model值是选中的id,有时候需要获取选中的label值,可以用以下的方法:<template><div class="container"><span>分类:</span><el-cascader ref="cascaderMallCatergory" v-model="mallCatergoryCode
·
通常 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事件:
打印结果如下:
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐



所有评论(0)