Vue+element Ui的el-select同时获取value和label的方法总结

news/2024/7/6 11:53:42

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(){
      // change 改变后获取值,要在nextTick中。
      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() {
        // change 改变后获取值,要在nextTick中。
        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) {
        // change 改变后获取值,要在nextTick中。
        this.$nextTick(function () {
          let obj = this.options.find(item=>item.value==v)
          console.log("value=====", obj.value);
          console.log("label=====", obj.label);
        });
      }
    },
  };
</script>


http://lihuaxi.xjx100.cn/news/1384678.html

相关文章

【Ubuntu18.04安装FileZilla】

Ubuntu18.04安装FileZilla 1 FileZilla简介2 安装方式3 使用方式3.1 连接FTP服务器3.1.1 快速连接3.1.2 通过站点管理器 1 FileZilla简介 FileZilla是自由开源、快速、可信赖的FTP客户端以及服务器端应用&#xff0c;具有多种特色、直观的接口。 特点&#xff1a;可控性、有条…

【Docker】Docker安全性与安全实践(五)

前言&#xff1a; Docker安全性的作用和意义在于确保容器化应用程序和镜像的隔离性、保护数据和系统资源、防止恶意攻击&#xff0c;以及提高应用的整体安全性。 文章目录 1. Docker安全性1.1 隔离性1.2 镜像安全1.3 特权访问1.4 数据保护 2. Docker安全实践2.1 使用官方镜像或…

素描基础知识

素描基础入门 1.基础线条 1.1 握笔姿势及长线条 2.排线 2.1 不同姿势画排线 2.1.1 姿势画排线 2.1.2 用手腕画排线 2.1.3 小拇指画排线 2.1.4 叠加排线 2.1.5交叉排线 2.2 纸张擦法 2.3 排线学习榜样 2.4 四种常见的排线 3、定向连线 4、一点透视 4.1 透视的规律 4.2 焦点透视…

文创产品火出圈,熊猫伴伴受到大家喜爱

在各种IP火遍网络的同时&#xff0c;其衍生出来的各种文创产品也凭借着自身的特点火到出圈&#xff0c;不仅爆红于网络上&#xff0c;就连线下的各种商店也有着其具象化的商品售卖。例如最近深受年轻人喜爱的熊猫伴伴&#xff0c;就凭借着其可爱的外表&#xff0c;受到了很多人…

抖音seo短视频矩阵系统源代码开发技术分享

抖音SEO短视频矩阵系统是一种通过优化技术&#xff0c;提高在抖音平台上视频的排名和曝光率的系统。以下是开发该系统的技术分享&#xff1a; 熟悉抖音平台的算法 抖音平台的算法是通过分析用户的兴趣爱好和行为习惯&#xff0c;对视频进行排序和推荐。因此&#xff0c;开发人员…

数据结构经典应用题-大小根堆

力扣295. 数据流的中位数 中位数是有序整数列表中的中间值。如果列表的大小是偶数&#xff0c;则没有中间值&#xff0c;中位数是两个中间值的平均值。 例如 arr [2,3,4] 的中位数是 3 。 例如 arr [2,3] 的中位数是 (2 3) / 2 2.5 。 实现 MedianFinder 类: MedianFind…

【小白必看】Python词云生成器详细解析及代码实现

文章目录 前言导入所需库将存好的Excel词频表读取成字典循环处理每个词频Excel文件定义词云样式和生成词云图完整代码运行效果截图知识点 结束语 前言 本文介绍了如何使用Python编写代码来生成词云图。在生成词云图之前&#xff0c;我们需要导入一些必需的库&#xff0c;包括nu…

【腾讯云 Cloud Studio 实战训练营】CloudStudio体验真正的现代化开发方式,双手插兜不知道什么叫对手!

CloudStudio体验真正的现代化开发方式&#xff0c;双手插兜不知道什么叫对手&#xff01; 文章目录 CloudStudio体验真正的现代化开发方式&#xff0c;双手插兜不知道什么叫对手&#xff01;前言出现的背景一、CloudStudio 是什么&#xff1f;二、CloudStudio 的特点三、CloudS…