如何让el-select自动选中第一个选项

一、初步了解el-select的属性

在实现el-select自动选中第一个选项之前，我们需要了解el-select的相关属性。在这里，我们需要重点关注两个属性：v-model和:default-first-option。其中v-model用于绑定选中的值，而:default-first-option用于设置是否默认选中第一个选项。默认情况下，v-model为空，而:default-first-option为false。因此，在默认情况下，el-select不会自动选中第一个选项。

二、设置v-model绑定选中的值

在使用el-select时，我们需要将选中的值绑定到v-model中。通常情况下，这个值是从后台读取的，例如从数据库中读取一个下拉列表。在这种情况下，我们需要确保绑定的值在下拉列表中存在。如果不存在，会导致el-select无法自动选中第一个选项。

<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>

<script>
  export default {
    data() {
      return {
        selectedValue: '2'
      }
    }
  }
</script>

在上面的代码中，我们设置了一个包含三个选项的el-select，并将v-model绑定到selectedValue中。此时，我们设置了selectedValue的默认值为2，因此，在el-select中默认选中选项2。

三、设置:default-first-option为true

我们可以使用:default-first-option属性来设置是否默认选中第一个选项。将其设置为true，el-select就会自动选中第一个选项。值得注意的是，当v-model中存在值时，:default-first-option将自动失效。

<el-select v-model="selectedValue" :default-first-option="true">
  <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>

在上面的代码中，我们为el-select设置了:default-first-option为true，此时el-select会自动选中第一个选项“选项1”。

四、使用watch监听v-model变化

如果在使用el-select时，确定了需要自动选中第一个选项，但是v-model中的值又是根据后台读取的，我们可以使用watch来监听v-model的变化，在v-model为空时，将其设置为第一个选项的值。

<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>

<script>
  export default {
    data() {
      return {
        selectedValue: ''
      }
    },
    watch: {
      selectedValue(newValue) {
        if (!newValue) {
          this.selectedValue = '1'
        }
      }
    }
  }
</script>

在以上代码中，我们监听了v-model的变化，并在v-model的值为空时，将其设置为第一个选项的值“1”。