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
发表评论