如何让el-select回显所选选项
时间: 2023-07-20 10:07:44 浏览: 214
要让 el-select 回显所选选项,你需要在 el-select 组件上设置 v-model 绑定一个变量,然后在这个变量中保存所选选项的值。例如:
```html
<el-select v-model="selectedOption" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
```
在上述代码中,我们将 el-select 组件的 v-model 绑定到名为 selectedOption 的变量上,然后在 el-option 组件中设置了每个选项的 value 值。这样,当用户选择一个选项时,selectedOption 变量会自动更新为所选选项的 value 值。
接着,你可以在组件中使用 selectedOption 变量来回显所选选项的值。例如,你可以在 el-select 组件下方添加一个文本框,用于显示所选选项的值:
```html
<el-select v-model="selectedOption" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<input type="text" v-model="selectedOption" readonly>
```
在上述代码中,我们使用了 selectedOption 变量来绑定文本框的 v-model,从而实现了回显所选选项的值。当用户选择一个选项时,文本框中的值会自动更新为所选选项的 value 值。
阅读全文