element-ui select 获取label
网上较多的做法都是通过数组的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>