element-ui select 获取label

向右看齐 2022-03-22 10:10 333阅读 0赞

网上较多的做法都是通过数组的find()方法,找到对象,再取出label.如果数组长度很大,会影响效率.

这里记录下另一种方法

<body>
    
    <div id="example">
    		<el-select v-model="value" placeholder="请选择" ref="selection">
    				<el-option
    								v-for="item in options"
    								:key="item.value"
    								:label="item.label"
    								:value="item.value">
    				</el-option>
    		</el-select>
    		
    		<button @click="handler">click</button>
    		<button @click="getHtml">获取label</button>
    </div>
    
    <script type="text/javascript" src="../js/vue.js"></script>
    
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#example',
            data() {
                return {
                    options: [{
                        value: '选项1',
                        label: '黄金糕'
                    }, {
                        value: '选项2',
                        label: '双皮奶'
                    }, {
                        value: '选项3',
                        label: '蚵仔煎'
                    }, {
                        value: '选项4',
                        label: '龙须面'
                    }, {
                        value: '选项5',
                        label: '北京烤鸭'
                    }],
                    value: '',
                }
            },
            methods: {
                handler(event) {
                    console.log(this.value+'--'+event.target.innerHTML)
                },
                getHtml() {
                    console.log(this.$refs.selection.selectedLabel)
                    console.log(this.value)
                }
            }
        })
    </script>
    </body>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTQwMjA1_size_16_color_FFFFFF_t_70]: /images/20220322/9dcea8fbc5124edbaaa5cc0827298cf1.png