详解el-select组件选中值的获取

el-select是ElementUI中的下拉选框组件，通常用于选择单个或多个值。在实际的开发中，我们需要获取选中的值来进行一些相关的操作。下面将从多个方面进行详细阐述el-select的选中值的获取。

一、获取select选中的值

要获取el-select组件选中的值，我们可以通过v-model指令来绑定一个data属性，然后在方法中获取该值。比如以下代码：

  
    <template>
      <div>
        <el-select v-model="selectedValue">
          <el-option label="选项1" value="1"></el-option>
          <el-option label="选项2" value="2"></el-option>
          <el-option label="选项3" value="3"></el-option>
        </el-select>
        <button @click="getValue">获取选中值</button>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            selectedValue: ''
          }
        },
        methods: {
          getValue() {
            console.log(this.selectedValue);
          }
        }
      }
    </script>
  

在上面的代码中，我们绑定了一个data属性selectedValue，然后在getValue方法中获取了该值并输出。当用户选中某个选项时， selectedValue的值也会相应地改变。

二、el-select默认选中的option

有时，我们需要在el-select中默认选中某个option。可以通过给v-model绑定一个默认值来实现。比如以下代码：

  
    <template>
      <div>
        <el-select v-model="selectedValue">
          <el-option label="选项1" value="1"></el-option>
          <el-option label="选项2" value="2"></el-option>
          <el-option label="选项3" value="3"></el-option>
        </el-select>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            selectedValue: '2'
          }
        }
      }
    </script>
  

在上面的代码中，我们将selectedValue的默认值设置为’2’，则在渲染el-select时，’选项2’将会默认被选中。

三、vue获取select选中的值

如果我们使用vue去获取el-select中选中的值，则可以将v-model的值直接绑定到一个vue实例的data中，具体代码如下：

  
    <template>
      <div>
        <el-select v-model="form.selectedValue">
          <el-option label="选项1" value="1"></el-option>
          <el-option label="选项2" value="2"></el-option>
          <el-option label="选项3" value="3"></el-option>
        </el-select>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            form: {
              selectedValue: ''
            }
          }
        }
      }
    </script>
  

上面的代码中，我们将el-select的value属性绑定到vue实例的form.selectedValue，然后可以直接通过 this.form.selectedValue 获取选中的值。

四、el-select清除选中

有时，我们需要通过代码的方式清除el-select当前选中的值，可以简单地将选中的值置为空。比如以下代码：

  
    <template>
      <div>
        <el-select v-model="selectedValue">
          <el-option label="选项1" value="1"></el-option>
          <el-option label="选项2" value="2"></el-option>
          <el-option label="选项3" value="3"></el-option>
        </el-select>
        <button @click="clearValue">清除选中</button>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            selectedValue: ''
          }
        },
        methods: {
          clearValue() {
            this.selectedValue = '';
          }
        }
      }
    </script>
  

在上面的代码中，我们定义了一个clearValue方法，在点击按钮时将selectedValue的值设置为空，这样就可以清除el-select当前选中的值。

五、el-select无法选中

有时我们会遇到无法选中el-select的情况。一种常见的原因是el-select的数据项没有设置value属性。在el-option标签中设置value属性可以解决该问题。比如以下代码：

  
    <template>
      <div>
        <el-select v-model="selectedValue">
          <el-option label="选项1" value="1"></el-option>
          <el-option label="选项2" value="2"></el-option>
          <el-option label="选项3" value="3"></el-option>
          <el-option label="选项4"></el-option>
        </el-select>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            selectedValue: ''
          }
        }
      }
    </script>
  

在上面的代码中，我们将’选项4’标签中的value属性去掉，则该选项将无法被选中。

六、el-select默认选中

有时，我们需要设置el-select的默认选中项，可以在mounted方法中通过代码来实现。比如以下代码：

  
    <template>
      <div>
        <el-select ref="mySelect">
          <el-option label="选项1" value="1"></el-option>
          <el-option label="选项2" value="2"></el-option>
          <el-option label="选项3" value="3"></el-option>
        </el-select>
      </div>
    </template>
    
    <script>
      export default {
        mounted() {
          this.$nextTick(() => {
            this.$refs.mySelect.remoteMethod('2');
          })
        }
      }
    </script>
  

上面的代码中，我们在mounted方法中通过this.\$refs.mySelect.remoteMethod(‘2’)来设置’选项2’被默认选中。

七、el-select动态添加值

有时，我们需要动态添加el-select的选项，可以通过给el-select组件的options绑定一个数组，然后在数组中添加新的选项来实现。比如以下代码：

  
    <template>
      <div>
        <el-select v-model="selectedValue">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <button @click="addOption">添加选项</button>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            selectedValue: '',
            options: [
              {label: '选项1', value: '1'},
              {label: '选项2', value: '2'}
            ]
          }
        },
        methods: {
          addOption() {
            this.options.push({label: '选项3', value: '3'});
          }
        }
      }
    </script>
  

在上面的代码中，我们定义了一个options数组，然后在el-select的options属性中进行绑定，通过addOption方法向options数组中添加新的选项。

八、获取el-select选中的值和描述值

有时，我们需要获取el-select选中的值及其描述值。可以通过给el-option设置label属性来获取描述值。比如以下代码：

  
    <template>
      <div>
        <el-select v-model="selectedValue">
          <el-option label="选项1" value="1"></el-option>
          <el-option label="选项2" value="2"></el-option>
          <el-option label="选项3" value="3"></el-option>
        </el-select>
        <button @click="getSelected">获取选中项值和描述值</button>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            selectedValue: ''
          }
        },
        methods: {
          getSelected() {
            let selectedOption = this.$refs.mySelect.selectedLabel;
            console.log('描述值：' + selectedOption);
            console.log('选中值：' + this.selectedValue);
          }
        }
      }
    </script>
  

在上面的代码中，我们通过this.\$refs.mySelect.selectedLabel来获取选中的option的描述值，通过选中的值是可以获取的。