vue之elementUi的el-select同时获取value和label的三种方式
一. 需求
如下图的下拉选项框，点击查看需要同时获取到选中选项的label值以及value值
以下是vue的渲染，在此不做过多介绍
<template>
<div class="root">
<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 style="margin-left: 20px" @click="showoptions" type="primary" >查看</el-button >
</div>
</template>el-select绑定一个value值，el-option需要一个数组，以下是模拟数据
data() {
return {
value: "",
options: [
{ id: 0, label: "苹果", value: "apple" },
{ id: 1, label: "香蕉", value: "banana" },
{ id: 2, label: "橙子", value: "orange" },
],
};
},二. 方法
1. 通过ref的形式（推荐）
在进行el-select渲染时，给el-select添加一个ref，用于获取值
然后就可以在点击事件或者提交表单时获取到选中的值了
methods: {
showoptions() {
console.log(
this.$refs.optionRef.selected.value,
this.$refs.optionRef.selected.label
);
},
},
想要回显的话直接给定el-select绑定的value为某个值即可，如想要回显苹果，就赋值为apple
该方法完整代码如下：
<template>
<div class="root">
<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 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
);
},
},
};
</script>2. 通过字符串拼接的形式（推荐）
这个方法相对于第一种方法而已，优点在于不止于同时获取label和value，可以获取多个，如再加一个id值什么的，这里演示还是以获取label和value为例，如想要获取其他，按照如下方式即可
我们在el-option渲染时，所设置的value属性值可以设置成label+value的形式，如下图
那么我们获取值时，直接获取el-select绑定的value即可，
获取后的值形式如下图，那么+号前面的就是想要的value值，后面的就是label值了，对返回的数据用split('+')进行切割，返回的数组索引0就是value值，数组索引1就是label值
这种方法在回显的时候稍微有点麻烦，因为要把回显的值也弄成value+label的形式渲染到el-select所绑定的value上，比如要回显香蕉，就将value设置为’banana+香蕉‘
以下是第二种方法的完整代码
<template>
<div class="root">
<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 + '+' + item.label"
>
</el-option>
</el-select>
<el-button style="margin-left: 20px" @click="showoptions" type="primary"
>查看</el-button
>
</div>
</template>
<script>
export default {
data() {
return {
value: "banana+香蕉",
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]);
},
},
};
</script>3. 通过遍历的形式（不推荐）
这种方法就不太友好，就是通过el-select绑定的value对el-option数组进行遍历查找
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了表格Table实现前端全选所有功能,包括非当前页的方案示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2024-02-02
这篇文章主要给大家介绍了关于在vue.js中引入vuex储存接口数据及调用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-12-12
前端vue项目如何使用Decimal.js做加减乘除求余运算
decimal.js是使用的二进制来计算的,可以更好地实现格化式数学运算,对数字进行高精度处理,使用decimal类型处理数据可以保证数据计算更为精确,这篇文章主要给大家介绍了关于前端vue项目如何使用Decimal.js做加减乘除求余运算的相关资料,需要的朋友可以参考下2024-05-05
本篇文章主要介绍了Vue.js父与子组件之间传参示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
这篇文章主要给大家介绍了关于Vue.js桌面端自定义滚动条组件之美化滚动条VScroll的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
前端低代码form-generator实现及新增自定义组件详解
这篇文章主要给大家介绍了关于前端低代码form-generator实现及新增自定义组件的相关资料,form-generator是一个开源的表单生成器,可以帮助我们快速构建各种表单页面,需要的朋友可以参考下2023-11-11
关于vue的element-ui web端引入高德地图并获取经纬度
这篇文章主要介绍了关于vue的element-ui web端引入高德地图并获取经纬度,高德地图首先要去申请key和密钥,文中提供了部分实现代码和解决思路,感兴趣的朋友可以学习一下2023-04-04
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
这篇文章主要介绍了vue+echarts+datav大屏数据展示及实现中国地图省市县下钻,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
下面小编就为大家分享一篇Vue cli 引入第三方JS和CSS的常用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
vue+scss+element-ui实现表格表头斜杠一分为三方式
这篇文章主要介绍了vue+scss+element-ui实现表格表头斜杠一分为三方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
最新评论