如何讓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”。