Vue+element Ui的el-select同时获取value和label的方法总结

1.通过ref的形式（推荐)

<template><div class="root"><el-selectref="optionRef"@change="handleChange"v-model="value"placeholder="请选择"style="width: 250px"><el-optionv-for="item in options":key="item.id":label="item.label":value="item.value"></el-option></el-select><el-button style="margin-left: 20px" @click="showoptions" type="primary" >查看</el-button ></div>
</template>
<script>
export default {data() {return {value: "",options: [{ id: 0, label: "苹果", value: "apple" },{ id: 1, label: "香蕉", value: "banana" },{ id: 2, label: "橙子", value: "orange" },],};},methods: {showoptions() {console.log(this.$refs.optionRef.selected.value,this.$refs.optionRef.selected.label);},handleChange(){// change 改变后获取值，要在nextTick中。this.$nextTick(function () {this.$refs.optionRef.selected.value,this.$refs.optionRef.selected.label});}},
};
</script>

2.通过字符串拼接的形式（推荐）

<template><div class="root"><el-select ref="optionRef" @change="handleChange" v-model="value" placeholder="请选择" style="width: 250px"><el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.value"></el-option></el-select><el-button style="margin-left: 20px" @click="showoptions" type="primary">查看</el-button></div>
</template>
<script>export default {data() {return {value: "",options: [{ id: 0, label: "苹果", value: "apple" },{ id: 1, label: "香蕉", value: "banana" },{ id: 2, label: "橙子", value: "orange" },],};},methods: {showoptions() {console.log(this.value);console.log("value=====", this.value.split("+")[0]);console.log("label=====", this.value.split("+")[1]);},handleChange() {// change 改变后获取值，要在nextTick中。this.$nextTick(function () {console.log(this.value);console.log("value=====", this.value.split("+")[0]);console.log("label=====", this.value.split("+")[1]);});}},};
</script>

3.通过遍历的形式（不推荐）

<template><div class="root"><el-select ref="optionRef" @change="handleChange" v-model="value" placeholder="请选择" style="width: 250px"><el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.value"></el-option></el-select></div>
</template>
<script>export default {data() {return {value: "",options: [{ id: 0, label: "苹果", value: "apple" },{ id: 1, label: "香蕉", value: "banana" },{ id: 2, label: "橙子", value: "orange" },],};},methods: {handleChange(v) {// change 改变后获取值，要在nextTick中。this.$nextTick(function () {let obj = this.options.find(item=>item.value==v)console.log("value=====", obj.value);console.log("label=====", obj.label);});}},};
</script>