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

发表评论