elementui下拉框设置默认值
时间: 2023-05-08 19:56:37 浏览: 1704
Element UI下拉框设置默认值的方法如下:
1. 在el-select的v-model绑定中指定默认值,例如:
```html
<el-select v-model="selectedValue">
<el-option label="Option 1" value="1"></el-option>
<el-option label="Option 2" value="2"></el-option>
<el-option label="Option 3" value="3"></el-option>
</el-select>
```
```javascript
data() {
return {
selectedValue: '2'
}
}
```
在这个例子中,我们将v-model绑定到selectedValue,然后在data中指定了默认值为2,因此打开页面时,下拉框的默认选项即为第二个选项。
2. 使用el-select的default-first-option属性来指定默认选项,例如:
```html
<el-select default-first-option v-model="selectedValue">
<el-option label="Option 1" value="1"></el-option>
<el-option label="Option 2" value="2"></el-option>
<el-option label="Option 3" value="3"></el-option>
</el-select>
```
```javascript
data() {
return {
selectedValue: ''
}
}
```
在这个例子中,我们将default-first-option属性设置为true,然后初始时将selectedValue设为一个空字符串,因此当默认选项被选中时,selectedValue会自动更新为选中的值。
需要注意的是,使用default-first-option属性时,不能将v-model绑定到一个空字符串,否则会出现错误。
以上就是Element UI下拉框设置默认值的两种方法,开发者可以根据具体情况选择合适的方法来实现元素的初始化。