elementUI select选择器怎么获取到选中的option的label和value

要获取 Element UI 的 el-select 选择器中选中的 option 的 label 和 value，你可以使用以下方法：

1. 使用 `v-model` 绑定选中值：通过 `v-model` 指令将选中的值绑定到一个变量。在这个变量中，你可以直接访问选中的 option 的 value。

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

<script>
export default {
  data() {
    return {
      selectedValue: '', // 绑定的选中值
      options: [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        // ...
      ]
    }
  },
  watch: {
    selectedValue(newValue) {
      // 获取选中的 option 的 value
      console.log(newValue);

      // 通过遍历选项数组获取选中的 option 的 label
      const selectedOption = this.options.find(option => option.value === newValue);
      if (selectedOption) {
        console.log(selectedOption.label);
      }
    }
  }
}
</script>

2. 使用 `change` 事件监听选中变化：通过监听 `change` 事件，在回调函数中获取选中的值。

<template>
  <el-select v-model="selectedValue" @change="handleSelectChange">
    <el-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value"></el-option>
  </el-select>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '', // 绑定的选中值
      options: [
        { label: 'Option 1', value: 'option1' },
        { label: 'Option 2', value: 'option2' },
        // ...
      ]
    }
  },
  methods: {
    handleSelectChange(newValue) {
      // 获取选中的 option 的 value
      console.log(newValue);

      // 通过遍历选项数组获取选中的 option 的 label
      const selectedOption = this.options.find(option => option.value === newValue);
      if (selectedOption) {
        console.log(selectedOption.label);
      }
    }
  }
}
</script>

无论使用哪种方法，你都可以通过获取到的 value 值来查找对应的 label 值。这样你就可以同时获取到选中的 option 的 label 和 value。

希望能解决你的问题！如果还有其他疑问，请随时提问。