el-select回显value值
时间: 2023-07-24 10:44:07 浏览: 122
要回显 `el-select` 组件的 `value` 值,有两种方法:
1. 使用 `v-model` 指令绑定 `value`,这样选中的值会自动更新到绑定的数据上,例如:
```html
<el-select v-model="selectedValue" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
```
```javascript
data() {
return {
options: [
{ value: 'option1', label: '选项一' },
{ value: 'option2', label: '选项二' },
{ value: 'option3', label: '选项三' }
],
selectedValue: ''
}
}
```
这样选中的值就会自动更新到 `selectedValue` 中,可以在其他地方使用 `selectedValue` 来获取选中的值。
2. 使用 `:value` 绑定 `value` 值,然后监听 `change` 事件,手动更新选中的值,例如:
```html
<el-select :value="selectedValue" @change="handleChange" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
```
```javascript
data() {
return {
options: [
{ value: 'option1', label: '选项一' },
{ value: 'option2', label: '选项二' },
{ value: 'option3', label: '选项三' }
],
selectedValue: ''
}
},
methods: {
handleChange(value) {
this.selectedValue = value
}
}
```
这样选中的值会通过 `change` 事件传递到 `handleChange` 方法中,然后手动更新 `selectedValue`。
阅读全文