Vue ElementUI、vue elementui selected默认选中某个选项

在使用Vue结合ElementUI开发项目时，我们常常会遇到需要默认选中select组件中某个选项的需求。解决方案是通过设置select组件绑定的v-model值与option中的value值相等来实现默认选中。

一、直接设置初始值

在data中定义一个变量用于存储select选中的值。例如：

javascript
data() {
return {
selectValue: '1' // 这里假设要默认选中value为1的选项
}
}


然后在template中使用select组件，并将这个变量绑定到v - model上：

html
<el - select v - model="selectValue" placeholder="请选择">
<el - option
v - for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el - option>
</el - select>


同时在data中定义options数据源：

javascript
options: [{
value: '1',
label: '黄金糕'
}, {
value: '2',
label: '双皮奶'
}]


当页面加载的时候，因为selectValue的值和其中一个option的value值相等，所以对应的选项就会被默认选中。

二、在mounted钩子函数中设置

如果需要根据某些逻辑或者异步获取的数据来确定默认选中的项，可以在mounted钩子函数中进行设置。

javascript
data() {
return {
selectValue: ''
}
},
mounted() {
this.selectValue = '1';// 假设根据某种逻辑确定要选中value为1的项
}


这样也可以实现默认选中的效果。

三、使用watch监听

有时候我们需要根据其他数据的变化来改变默认选中的项，这时候可以使用watch。

javascript
data() {
return {
otherData: '',
selectValue: ''
}
},
watch: {
otherData(newVal) {
if (newVal === 'someCondition') {
this.selectValue = '1';
}
}
}


以上就是在Vue ElementUI中实现select组件默认选中某个选项的方法，可以根据实际需求选择合适的方式。