1.通过ref的形式(推荐)
<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.$refs.optionRef.selected.value,
this.$refs.optionRef.selected.label
);
},
handleChange(){
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() {
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) {
this.$nextTick(function () {
let obj = this.options.find(item=>item.value==v)
console.log("value=====", obj.value);
console.log("label=====", obj.label);
});
}
},
};
</script>