获取el-select的label

使用@click.navite

在 el-option 中添加 @clik.native 在方法的传参中传入自己需要的内容

这个方法同样适用于 element-plus

<template><el-select v-model="selectValue"><el-option v-for="item in options" :key="item.value":value="item.value":label="item.label"@click.native="optionClick(item.label)"></el-option></el-select>
</template>

<script>export default {name: 'ElSelectTest',data() {return {selectValue: '',options: [{ label: '苹果', value: 1 },{ label: '香蕉', value: 2 },{ label: '菠萝', value: 3 }]}},methods: {optionClick(label) {console.log(label);}}}
</script>

使用ref获取

在 el-select 中添加 ref

使用 Vue.nextTick() 获取dom刷新后的label

这种方式不适用于 element-plus

<template><el-select v-model="selectValue"ref="fruitSelect"@change="selectChange"><el-option v-for="item in options" :key="item.value":value="item.value":label="item.label"></el-option></el-select>
</template>

<script>import Vue from 'vue';export default {name: 'ElSelectTest',data() {return {selectValue: '',options: [{ label: '苹果', value: 1 },{ label: '香蕉', value: 2 },{ label: '菠萝', value: 3 }]}},methods: {selectChange() {Vue.nextTick(() => {console.log(this.$refs.fruitSelect.selectedLabel);});}}}
</script>