vue el-select 切换保留原来的回显数据
时间: 2023-07-24 22:59:10 浏览: 104
Vue切换组件实现返回后不重置数据,保留历史设置操作
5星 · 资源好评率100%
在 Vue 的 el-select 组件中,可以通过 v-model 指令绑定一个数据对象来实现数据的切换和回显。要保留原来的回显数据,可以将原来的回显数据赋值给 v-model 绑定的数据对象。这样,在切换选项时,v-model 绑定的数据对象会更新为新选项的值,但是原来的回显数据不会丢失。
下面是一个示例代码:
```html
<template>
<div>
<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>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '选项一', value: 'option1' },
{ label: '选项二', value: 'option2' },
{ label: '选项三', value: 'option3' }
],
selectedOption: 'option2', // 初始回显数据
};
},
};
</script>
```
在上述示例中,selectedOption 初始值为 'option2',即选项二。当用户切换选项时,selectedOption 会更新为新选项的值,但是初始回显数据 'option2' 不会丢失。
阅读全文