Cascader获取选中的值
文章描述:
Element组件 Cascader 级联选择器获取选中的值
选择任意一级选项
<div id="app">
<div class="block">
<span class="demonstration">单选选择任意一级选项</span>
<el-cascader
:options="options"
:props="{ checkStrictly: true }"
ref="cascaderArr"
v-model="areaCodeArr"
@change="handleChange($event)"
clearable></el-cascader>
</div>
<el-button type="primary" @click="post">获取</el-button>
</div>
<script>
var _self;
new Vue({
el: '#app',
data: function() {
return {
areaCodeArr:[],
options: [
{
value: '1',
label: '水果',
children: [{
value: '3',
label: '苹果'
}, {
value: '5',
label: '香蕉'
}, {
value: '7',
label: '草莓'
}]
},
{
value: '2',
label: '文具',
children: [{
value: '4',
label: '铅笔'
}, {
value: '6',
label: '尺子'
}, {
value: '8',
label: '橡皮擦'
}]
}
]
}
},
created(){
_self = this;
},
methods: {
post(){
var val = _self.areaCodeArr // 选中的值
var arr = _self.options
console.log(val)
console.log(arr)
var index1 = val[0]
var index2 = val[1]
console.log(index1)
console.log(index2)
},
handleChange(row) {
const checkedNode = this.$refs["cascaderArr"].getCheckedNodes();
console.log( checkedNode[0].data.label ) ; //获取当前点击节点的label值
console.log( checkedNode[0].pathLabels) ; //获取由label组成的数组
}
}
})
</script>
发布时间:2024/09/14
发表评论