一.需求

下图下拉选项框,点击查看需要同时获取到选中选项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&gt;
    </el-select&gt;
    <el-button style="margin-left: 20px" @click="showoptions" type="primary" &gt;查看</el-button &gt;
  </div&gt;
</template&gt;

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数组进行遍历查找

原文地址:https://blog.csdn.net/PJL13411055804/article/details/127612662

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_37552.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注