vue之elementUi的el-select同时获取value和label的三种方式

陈昌永

一. 需求

如下图的下拉选项框，点击查看需要同时获取到选中选项的label值以及value值

以下是vue的渲染，在此不做过多介绍

1. <template>
   
2.   <div class="root">
   
3.     <el-select
   
4.       ref="optionRef"
   
5.       v-model="value"
   
6.       placeholder="请选择"
   
7.       style="width: 250px"
   
8.     >
   
9.       <el-option
   
10.         v-for="item in options"
    
11.         :key="item.id"
    
12.         :label="item.label"
    
13.         :value="item.value"
    
14.       >
    
15.       </el-option>
    
16.     </el-select>
    
17.     <el-button style="margin-left: 20px" @click="showoptions" type="primary" >查看</el-button >
    
18.   </div>
    
19. </template>

复制代码

el-select绑定一个value值，el-option需要一个数组，以下是模拟数据

1. data() {
   
2.     return {
   
3.       value: "",
   
4.       options: [
   
5.         { id: 0, label: "苹果", value: "apple" },
   
6.         { id: 1, label: "香蕉", value: "banana" },
   
7.         { id: 2, label: "橙子", value: "orange" },
   
8.       ],
   
9.     };
   
10.   },

复制代码

二. 方法


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

在进行el-select渲染时，给el-select添加一个ref，用于获取值

然后就可以在点击事件或者提交表单时获取到选中的值了

1. methods: {
   
2.     showoptions() {
   
3.       console.log(
   
4.         this.$refs.optionRef.selected.value,
   
5.         this.$refs.optionRef.selected.label
   
6.       );
   
7.     },
   
8.   },

复制代码

想要回显的话直接给定el-select绑定的value为某个值即可，如想要回显苹果，就赋值为apple
该方法完整代码如下：

1. <template>
   
2.   <div class="root">
   
3.     <el-select
   
4.       ref="optionRef"
   
5.       v-model="value"
   
6.       placeholder="请选择"
   
7.       style="width: 250px"
   
8.     >
   
9.       <el-option
   
10.         v-for="item in options"
    
11.         :key="item.id"
    
12.         :label="item.label"
    
13.         :value="item.value"
    
14.       >
    
15.       </el-option>
    
16.     </el-select>
    
17.     <el-button style="margin-left: 20px" @click="showoptions" type="primary" >查看</el-button >
    
18.   </div>
    
19. </template><script>export default {  data() {
    
20.     return {
    
21.       value: "",
    
22.       options: [
    
23.         { id: 0, label: "苹果", value: "apple" },
    
24.         { id: 1, label: "香蕉", value: "banana" },
    
25.         { id: 2, label: "橙子", value: "orange" },
    
26.       ],
    
27.     };
    
28.   },  methods: {
    
29.     showoptions() {
    
30.       console.log(
    
31.         this.$refs.optionRef.selected.value,
    
32.         this.$refs.optionRef.selected.label
    
33.       );
    
34.     },
    
35.   },};</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+香蕉‘
以下是第二种方法的完整代码

1. <template>
   
2.   <div class="root">
   
3.     <el-select
   
4.       ref="optionRef"
   
5.       v-model="value"
   
6.       placeholder="请选择"
   
7.       style="width: 250px"
   
8.     >
   
9.       <el-option
   
10.         v-for="item in options"
    
11.         :key="item.id"
    
12.         :label="item.label"
    
13.         :value="item.value + '+' + item.label"
    
14.       >
    
15.       </el-option>
    
16.     </el-select>
    
17.     <el-button style="margin-left: 20px" @click="showoptions" type="primary"
    
18.       >查看</el-button
    
19.     >
    
20.   </div>
    
21. </template>
    
22. <script>
    
23. export default {
    
24.   data() {
    
25.     return {
    
26.       value: "banana+香蕉",
    
27.       options: [
    
28.         { id: 0, label: "苹果", value: "apple" },
    
29.         { id: 1, label: "香蕉", value: "banana" },
    
30.         { id: 2, label: "橙子", value: "orange" },
    
31.       ],
    
32.     };
    
33.   },
    
34.   methods: {
    
35.     showoptions() {
    
36.       console.log(this.value);
    
37.       console.log("value=====", this.value.split("+")[0]);
    
38.       console.log("label=====", this.value.split("+")[1]);
    
39.     },
    
40.   },
    
41. };
    
42. </script>

复制代码

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

这种方法就不太友好，就是通过el-select绑定的value对el-option数组进行遍历查找

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/article/276264.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！