一次搞懂 el-select 如何获取选中项的中文名称

前言

最近在开发时总遇到一些起奇奇怪怪的需求，例如 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>

---

实现效果如下

---

下拉框可以多选时

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>

实现效果如下