一、初步了解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”。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/251852.html
微信扫一扫 
支付宝扫一扫 