el-select 回显选中
时间: 2023-07-13 15:04:29 浏览: 102
要回显 `el-select` 组件中选中的值,你可以使用 `v-model` 指令来绑定一个变量来保存当前选中的值,并且在 `el-select` 组件上设置 `:value` 属性为这个变量,这样当你选中某个选项时,这个变量的值就会被更新,同时也会触发 `el-select` 组件的 `change` 事件。例如:
```html
<template>
<el-select v-model="selectedValue" :value="selectedValue" @change="handleChange">
<el-option label="Option 1" value="option1"></el-option>
<el-option label="Option 2" value="option2"></el-option>
<el-option label="Option 3" value="option3"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedValue: 'option1'
}
},
methods: {
handleChange() {
console.log('Selected value:', this.selectedValue)
}
}
}
</script>
```
在上面的例子中,我们使用 `v-model` 绑定了 `selectedValue` 变量来保存当前选中的值,同时在 `el-select` 组件上设置了 `:value="selectedValue"` 来让它回显选中的值。当用户选中某个选项时,`selectedValue` 变量的值就会被更新,并且触发 `handleChange` 方法来输出选中的值。
阅读全文