一、获取元素并修改value属性
要实现默认选中第一个，我们需要获取到Select组件中的第一个option并将其value值赋给Select组件的value属性。
<template>
<el-select v-model="selected">
<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' }
],
selected: '' // 这里定义一个空字符串用于存储选中的value值
}
},
mounted() {
// 在mounted钩子中获取第一个option，并将其value值赋给selected
this.selected = this.options[0].value;
}
};
</script>
二、优化代码
上面的代码已经可以实现默认选中第一个了，但随着选项数量的增加，代码会变得冗长。下面介绍几个优化方式。
1.使用ref获取Select组件
使用Vue的ref指令可以获取到组件的dom元素，从而可以更方便地操作。这样我们就可以不需要在data中定义selected，而是直接通过ref获取到选中的值。
<template>
<el-select ref="select">
<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' }
]
}
},
mounted() {
// 在mounted钩子中获取第一个option，并设置Select的value属性
this.$refs.select.$el.querySelector('.el-select-dropdown__item').click();
}
};
</script>
2.使用v-model双向绑定
通过v-model双向绑定，我们可以更方便地控制Select组件的value属性，代码也更加简洁。
<template>
<el-select v-model="selected">
<el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' }
],
selected: '1' // 设置默认选中第一个
}
}
};
</script>
三、兼容性
在一些特殊情况下，比如
