vue之elementUi的el-select同时获取value和label

在Vue中使用Element UI的el-select组件时，可以通过v-model来双向绑定选中的值，但如果需要同时获取对应的标签文本（label），可以通过el-option的label属性来实现。

以下是一个简单的例子，展示如何在选择时同时获取value和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, // 选中的值
      selectedLabel: '', // 选中的标签
      options: [
        { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }
      ]
    };
  },
  watch: {
    selectedValue(newValue) {
      const selectedOption = this.options.find(option => option.value === newValue);
      if (selectedOption) {
        this.selectedLabel = selectedOption.label;
      }
    }
  }
};
</script>

在这个例子中，selectedValue保存了选中项的值，而selectedLabel保存了对应的标签文本。通过在watch中监听selectedValue的变化，我们可以在每次选择发生变化时更新selectedLabel。这样，无论何时，你都可以同时获取到选中项的值和标签。