一、什么是 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 组件时，我们可以根据实际需求，选择不同的方式来设置默认选中的选项，以便为用户提供更好的使用体验。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/246541.html
微信扫一扫 
支付宝扫一扫 