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

在Vue中使用Element UI的el-select组件时，如果需要同时获取选中项的值（value）和标签（label），可以通过以下三种方法来实现：

1. 使用v-model来双向绑定选中的值，并且在数据中维护一个选项数组，通过遍历这个数组找到对应的label。

<template>
  <el-select v-model="selectedValue" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValue: null,
      options: [
        { value: 'value1', label: 'label1' },
        { value: 'value2', label: 'label2' },
        // ...
      ]
    };
  },
  watch: {
    selectedValue(newValue) {
      const selectedOption = this.options.find(option => option.value === newValue);
      if (selectedOption) {
        console.log('Selected Label:', selectedOption.label);
      }
    }
  }
};
</script>

2. 使用el-select的change事件来获取选中项的值，并通过事件处理函数来获取对应的标签。

<template>
  <el-select @change="handleChange" placeholder="请选择">
    <!-- options -->
  </el-select>
</template>
 
<script>
export default {
  methods: {
    handleChange(value) {
      const selectedOption = this.options.find(option => option.value === value);
      if (selectedOption) {
        console.log('Selected Label:', selectedOption.label);
      }
    }
  }
};
</script>

3. 使用el-option的@click事件来直接获取点击的标签。

<template>
  <el-select placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      @click.native="handleOptionClick(item)">
    </el-option>
  </el-select>
</template>
 
<script>
export default {
  methods: {
    handleOptionClick(option) {
      console.log('Selected Label:', option.label);
    }
  }
};
</script>

以上三种方法均可以实现在Element UI的el-select组件中同时获取value和label，选择使用取决于具体的应用场景和需求。