Element Plus的`<el-select>`如何设置默认值?
时间: 2024-09-20 08:08:49 浏览: 78
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
在Element Plus的`<el-select>`组件中设置默认值,通常是在初始化组件时通过v-model指令绑定数据,并为其赋一个预设选项的value属性。下面是一个基本示例:
```html
<template>
<el-select v-model="selectedOption" placeholder="请选择">
<el-option
v-for="option in options"
:key="option.value"
:label="option.label"
:value="option.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedOption: '', // 默认选中的值,可以为空,也可以指定一个选项的value
options: [
{ value: 'option1', label: '选项一' },
{ value: 'option2', label: '选项二' },
{ value: 'option3', label: '选项三' },
],
};
},
};
</script>
```
在这个例子中,当`selectedOption`的值改变时,`<el-select>`的下拉框内容会随之更新。如果你希望在页面加载时就显示某个默认选项,只需将`selectedOption`的初始值设置为你想要的那个选项的`value`。
阅读全文