前言

最近在开发时总遇到一些起奇奇怪怪的需求，例如 el-select 组件需要同时获取用户选中的 label 值跟 value 值，据后台人员说是只传一个 value 匹配不上数据。害，这还不简单，那我就都传过去呗，下面给大家分享几种快速拿到用户选中 label 值的方法。

单选时

1. 使用 Arry.find 方法

Arry.find() 方法返回数组中满足提供的测试函数的第一个元素的值，若没有满足测试函数的元素，则返回 undefined。

参数

描述

function(currentValue, index,arr)

必需。数组每个元素需要执行的函数。其中 currentValue 为必需。意为当前元素；index 非必需，意为当前元素的索引值；arr 非必需，意为当前元素所属的数组对象。

thisValue

非必需。 传递给函数的值一般用 this 值。如果这个参数为空， undefined 会传递给 this 值

代码如下：

<template>
  <div>
    <el-select v-model="selected" @change="handleChange">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "0",
          label: "黄金糕",
        },
        {
          value: "1",
          label: "双皮奶",
        },
        {
          value: "2",
          label: "蚵仔煎",
        },
        {
          value: "3",
          label: "龙须面",
        },
        {
          value: "4",
          label: "北京烤鸭",
        },
      ],
      selected: "",
    };
  },
  methods: {
    handleChange() {
      const selectedOption = this.options.find(
        (item) => item.value === this.selected
      );
      console.log(selectedOption.value, selectedOption.label);
    },
  },
};
</script>

2. 通过绑定原生 click 事件来进行传参

代码如下：

<template>
  <div>
    <el-select v-model="value" placeholder="请选择">
      <el-option @click.native="labelOn(item.label)" v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "0",
          label: "黄金糕",
        },
        {
          value: "1",
          label: "双皮奶",
        },
        {
          value: "2",
          label: "蚵仔煎",
        },
        {
          value: "3",
          label: "龙须面",
        },
        {
          value: "4",
          label: "北京烤鸭",
        },
      ],
      value: "",
    };
  },
  mounted() {},
  methods: {
    labelOn(e) {
     console.log(e);
    },
  },
};
</script>

3. 使用 ref/$refs 方法

通过 $refs 拿到 el-select 组件实例，该实例拥有 selectedLabel 属性，值为当前选中的 label；也可以通过 selected 拿到选中的 option 的组件实例，拥有 label 和 value 两个属性。

代码如下：

<template>
  <div>
    <el-select @change="touchOn" ref="labelRef" v-model="value" placeholder="请选择">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "0",
          label: "黄金糕",
        },
        {
          value: "1",
          label: "双皮奶",
        },
        {
          value: "2",
          label: "蚵仔煎",
        },
        {
          value: "3",
          label: "龙须面",
        },
        {
          value: "4",
          label: "北京烤鸭",
        },
      ],
      value: "",
    };
  },
  mounted() {},
  methods: {
    // 选中值发生变化时触发
    touchOn(e) {
      //一定要放在this.$nextTic方法中，否则第一次拿不到值
      this.$nextTick(() => {
        console.log(this.$refs.labelRef.selectedLabel);
        console.log(this.$refs.labelRef.selected.label);
      });
    },
  },
};
</script>

4. 将整个选项对象绑定到选项的 value 属性上

将整个选项对象绑定到选项的 value 属性上，而不是只绑定 value 属性。这样，在 handleChange 方法中，可以直接访问 selected.value 和 selected.label 属性来获取选中的值。

<template>
  <div>
    <el-select v-model="selected" @change="handleChange">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="{value: item.value, label: item.label}"></el-option>
    </el-select>

  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "0",
          label: "黄金糕",
        },
        {
          value: "1",
          label: "双皮奶",
        },
        {
          value: "2",
          label: "蚵仔煎",
        },
        {
          value: "3",
          label: "龙须面",
        },
        {
          value: "4",
          label: "北京烤鸭",
        },
      ],
      selected: {},
    };
  },
  methods: {
    handleChange() {
      console.log(this.selected.value, this.selected.label);
    },
  },
};
</script>

实现效果如下

element plus select选中值为对象 el-select获取选中值_下拉框

下拉框可以多选时

1. 使用 watch 监听选中值的变化

在 vue 组件的 watch 选项中添加一个监听函数，监听 selectedValues 数组的变化。当数组发生变化时，获取选中的 label 和 value 即可。

<template>
  <div>
    <el-select v-model="selectedValues" multiple>
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { label: "选项1", value: "0" },
        { label: "选项2", value: "1" },
        { label: "选项3", value: "2" },
      ],
      selectedValues: [],
    };
  },
  watch: {
    selectedValues(newValues) {
      const selectedLabels = this.options
        .filter((option) => newValues.includes(option.value))
        .map((option) => option.label);
      console.log("选中的label:", selectedLabels);
      console.log("选中的value:", newValues);
    },
  },
};
</script>

2. 使用计算属性获取选中的 label 和 value

<template>
  <div>
    <el-select v-model="selectedValues" multiple>
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
  </div>  
</template>

<script>
export default {
  data() {
    return {
      options: [
        { label: "选项1", value: "0" },
        { label: "选项2", value: "1" },
        { label: "选项3", value: "2" },
      ],
      selectedValues: [],
    };
  },
  computed: {
    selectedLabels() {
      return this.options
        .filter((option) => this.selectedValues.includes(option.value))
        .map((option) => option.label);
    },
  },
  watch: {
    selectedValues(newValues) {
      console.log("选中的label:", this.selectedLabels);
      console.log("选中的value:", newValues);
    },
  },
};
</script>

实现效果如下

element plus select选中值为对象 el-select获取选中值_前端_02