Element Select 默認選中

一、什麼是 Element Select？

Element Select 是一個基於 Vue.js 的組件，可以用於快速創建下拉菜單（Select）。

在這個組件中，你可以指定多個選項，並且可以設置默認選中的選項。

<el-select v-model="selected">
  <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>

new Vue({
  data() {
    return {
      selected: '2'
    };
  }
});

上面的代碼可以創建一個包含 3 個選項的下拉菜單，其中默認選中的選項是 “選項2”。

二、如何設置默認選中的選項？

Element Select 提供了兩種方式來設置默認選中的選項。分別是：

1. 設置 v-model 的默認值

在上面的示例中，我們設置了 “selected” 這個數據屬性的默認值為 “2”，因此下拉菜單默認就會選中 “選項2”。

new Vue({
  data() {
    return {
      selected: '2'
    };
  }
});

2. 設置 el-select 的默認值

我們可以在 el-select 標籤中設置 “value” 屬性，來指定默認選中的選項。但是需要注意的是，這種方式只有在下拉菜單的選項沒有設置 value 屬性時才有效。

<el-select v-model="selected" value="選項2">
  <el-option label="選項1"></el-option>
  <el-option label="選項2"></el-option>
  <el-option label="選項3"></el-option>
</el-select>

new Vue({
  data() {
    return {
      selected: ''
    };
  }
});

在上面的示例中，我們設置了 el-select 標籤的 “value” 屬性為 “選項2”，因此默認選中的選項是 “選項2”。而我們在 data 中定義的 “selected” 數據屬性的初始值為 “”，即未選中任何選項。

三、如何清空默認選中的選項？

有時候，我們需要將一個已有的下拉菜單的默認選中的選項清空，即不選擇任何選項。可以通過將 “selected” 數據屬性的值設置為空字符串來實現：

new Vue({
  data() {
    return {
      selected: ''
    };
  }
});

上面的代碼將 “selected” 數據屬性的值設置為空字符串，即取消默認選中的選項。

四、小結

通過上面的介紹，我們了解了 Element Select 組件的默認選中相關的知識，包括如何設置默認選中的選項，以及如何取消默認選中的選項。

在使用 Element Select 組件時，我們可以根據實際需求，選擇不同的方式來設置默認選中的選項，以便為用戶提供更好的使用體驗。