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 组件时，我们可以根据实际需求，选择不同的方式来设置默认选中的选项，以便为用户提供更好的使用体验。