Element的el-cascader组件获取级联选中的label值

文章描述:

Vue Element Cascader 级联选择器获取选中的值,select获取下拉选择的值

html

<template>
	<div class="container">
		<div>
			<el-cascader v-model="model.region_id" :options="options" :props="props" style="width:100%" placeholder="一级地区"
			@change="handleChange"
			ref="cascader" />
		</div>
	</div>
</template>

script

export default {
    data() {
      return {
        model:{
			// region_id: 5101
		},
		props: { expandTrigger: 'click', checkStrictly: true, value: 'region_id', label: 'region_name', emitPath: false },
		options: [
			{
				"region_id": 51,
				"region_pid": 0,
				"region_name": "四川省",
				"children": [
					{
						"region_id": 5101,
						"region_pid": 51,
						"region_name": "成都市",
						"children": [
							{
							"region_id": 510104,
							"region_pid": 5101,
							"region_name": "锦江区"
							},
							{
								"region_id": 510105,
								"region_pid": 5101,
								"region_name": "青羊区"
							},
						],
					},
					{
					    "region_id": 5113,
					    "region_pid": 51,
					    "region_name": "南充市",
					    "children": [
							{
					        "region_id": 511302,
					        "region_pid": 5113,
					        "region_name": "顺庆区"
					        },
					        {
					            "region_id": 511303,
					            "region_pid": 5113,
					            "region_name": "高坪区"
					        },
						],
					}
				],
			},
			
		],
      }
    },
    methods: {
      handleChange(){
		  console.log(this.$refs["cascader"].getCheckedNodes()[0].label)
	  }
    }
}

 

Element的el-cascader(级联器)组件的value容易获取,主要是label。

给el-cascader添加ref,然后在@change事件中获取,需使用getCheckedNodes方法的节点获取

console.log(this.$refs["cascader"].getCheckedNodes()[0].label)
console.log(this.$refs["cascader"].getCheckedNodes()[0].value)

 

如果想要获得多级级联的label,则通过pathLabels可以获得对应的label数组。

console.log(this.$refs["cascader"].getCheckedNodes()[0].pathLabels)

 

发布时间:2023/05/30

发表评论