el-select el-option 設置默認預選項
时间: 2024-10-22 19:01:22 浏览: 23
详解element-ui中el-select的默认选择项问题
在Element UI库中的el-select组件中,如果你想要设置默认选中的option(即预选选项),可以这样做:
首先,在`<el-select>`标签内,你可以通过`v-model`指令绑定一个变量来管理当前选择的值,这个变量通常是你应用状态的一部分。
```html
<el-select v-model="selectedValue">
```
然后,在`<el-option>`标签列表中,为每个可选项添加一个`value`属性,这个属性需要和`v-model`绑定的变量值相匹配,如果希望某个选项作为默认值,就给它设置相同的`value`。
```html
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
```
在这个例子中,`options`是一个数组,包含你想显示的各种选项,比如:
```javascript
const options = [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'defaultOption', label: '默认选项' } // 这将是默认选择
]
```
当你初始化应用时,确保`selectedValue`指向了`defaultOption`,这样用户打开下拉框时就会看到默认选项已选中。
```javascript
data() {
return {
selectedValue: 'defaultOption'
};
}
```
阅读全文