一、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指令来控制其渲染时机，避免在未渲染时就访问其实例的情况。
原创文章，作者：GRBVB，如若转载，请注明出处：https://www.506064.com/n/349335.html
微信扫一扫 
支付宝扫一扫 