vue3+elementplus怎么实现el-select默认选择第一个选项
时间: 2023-11-19 21:28:30 浏览: 288
在 Vue3 中,你可以使用 `v-model` 指令来绑定选择的值,而要设置 `el-select` 的默认选项,可以在 `v-model` 绑定的变量中设置默认值即可。具体来说,你可以在 `setup` 函数中初始化 `selectedValue` 的值,然后在 `el-select` 中使用 `v-model` 绑定它,如下所示:
```
<template>
<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>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const selectedValue = ref('1'); // 初始化选中第一个选项
return {
selectedValue,
};
},
};
</script>
```
这样第一个选项就会默认被选中了。注意,这里没有使用 `:value` 属性,而是直接将 `v-model` 绑定到了 `selectedValue`,这是因为在 Vue3 中,`v-model` 指令已经默认绑定了 `value` 和 `input` 事件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)