详解el-select的默认值

一、el-select 默认值

el-select是Element UI组件库中的一种下拉选择器。在使用el-select组件时，可以通过设置默认值来使页面初始显示选定的选项。el-select默认值有两种情况：一是没有指定默认值，此时el-select将不选中任何选项；二是指定了默认值，此时el-select将默认选中指定的选项。

二、el-select设置默认值

在el-select组件中，可以通过设置v-model属性来控制其选中的选项，从而设置el-select的默认值。v-model所绑定的数据需要和el-select选项对应的唯一值(value)相等，这样el-select才会选中该选项。

在el-select的选项中，可以通过设置selected属性来指定哪个选项是默认选中的。如果多个选项设置了selected属性，则以最后一个设置的为准。

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

三、el-select默认选中

在某些情况下，我们可能需要在el-select组件中预先选中某些选项。比如，在修改某个任务的页面中，我们需要把任务的当前状态选中。此时，我们可以通过在el-select的组件上添加ref属性，然后通过ref属性来访问el-select实例中的方法，从而实现预选中某些选项的效果。

在el-select中，可以通过调用select方法来选择某些选项。该方法接收一个参数，以数组的形式传入所要选中的选项的值(value)。调用select方法后，所传入的选项将会被选中。

<template>
  <div>
    <el-select v-model="selectedOptions" 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-option label="选项4" value="4"></el-option>
    </el-select>
    <el-button @click="setSelectedOptions">设置默认选项</el-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        selectedOptions: []
      };
    },
    methods: {
      setSelectedOptions() {
        this.$refs.mySelect.select(["1", "3"]);
      }
    }
  };
</script>

四、el-select 默认值存在的注意事项

在使用el-select的默认值时，有一些需要注意的点。

首先，el-select的默认值必须与其选项中的value属性所对应的值相等，才能实现正确的默认选中效果。如果默认值与选项的value值不匹配，则el-select将无法选中任何选项。

其次，如果设置了el-select的默认值，那么在选项变化时，el-select会尝试根据默认值来自动选中一个新的选项。如果默认值匹配不上，则不作任何操作。如果能匹配上，则会自动选中一个新的选项，但是不会触发el-select的change事件。

最后需要注意的是，在使用ref来访问el-select实例时，需要确保el-select已经被渲染出来了，才能访问到其实例。可以通过在el-select上添加v-if指令来控制其渲染时机，避免在未渲染时就访问其实例的情况。