詳解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指令來控制其渲染時機，避免在未渲染時就訪問其實例的情況。