在用element ui的下拉框时需要同时获取到下拉框选中项的value值和label值,这篇文章将为大家分析方法。
首先是vue在页面渲染
<template>
<div id="demo">
<el-select ref="optionRef" 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 @click="showValueAndLabel" type="primary">查询</el-button>
</div>
</template>
测试数据
value: "",
options: [
{ id: 0, label: "写代码", value: "coding" },
{ id: 1, label: "睡觉", value: "sleep" },
{ id: 2, label: "吃饭", value: "eat" },
],
方法:
通过ref的形式获取值
在进行el-select渲染时,给el-select添加一个ref,用于获取值
methods: {
// 1.通过ref获取label和value值
showValueAndLabel() {
console.log(this.$refs.optionRef.selected.label);
console.log(this.$refs.optionRef.selected.value);
}
}