Vue：Element获取select选择框选择的value和label

可以使用Element UI中的v-model指令，将选中的值和对应的标签存储在data中的变量中

具体代码如下：

<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>
  <div>选择的值：{
   
   {selectedValue}}</div>
  <div>对应的标签：{
   
   {selectedLabel}}</div>
</template>

<script>
export default {
      
      
  data() {
      
      
    return {
      
      
      options: [
        {
      
       value: 'option1', label: '选项1' },
        {
      
       value: 'option2', label: '选项2' },
        {
      
       value: 'option3', label: '选项3' }
      ],
      selectedValue: '',
      selectedLabel: ''
    };
  },
  watch: {
      
      
    selectedValue(newVal) {
      
      
      const option = this.options.find(item => item.value === newVal);
      this.selectedLabel = option ? option.label : '';
    }
  }
};
</script>
 

在template中，v-model指令绑定了selectedValue变量，表示选中的值。同时，给<el-option>添加了v-for循环生成所有的选项。当选中的值改变时，使用watch监听selectedValue的变化，通过find方法从options中找到选中的值对应的选项，并将标签存储在selectedLabel变量中。最后，将selectedValue和selectedLabel显示在页面上。