如何让el-select回显所选选项
时间: 2023-07-20 10:07:43 浏览: 96
el-select 下拉框多选实现全选的实现
5星 · 资源好评率100%
要让 `el-select` 回显所选选项,需要在 `el-select` 中设置 `v-model` 绑定一个变量,并将这个变量初始化为默认选中的选项。
例如,如果你有一个 `options` 数组,其中包含了所有可选的选项,你可以设置一个 `selectedOption` 变量,用来绑定 `v-model`,并将其初始化为默认选中的选项:
```html
<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>
```
然后在你的 Vue 实例中,你需要定义 `selectedOption` 变量,并将其初始化为默认选中的选项:
```js
data() {
return {
options: [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
{ label: '选项3', value: 'option3' }
],
selectedOption: 'option2' // 将默认选中的选项设置为 'option2'
};
}
```
这样,当你选择其他选项时,`selectedOption` 的值会随之改变,从而实现了回显所选选项的功能。
阅读全文