el-select 中某一项el-option在刷新页面过程中会显示成value,刷新页面完成后,又会显示成label
时间: 2024-02-16 20:04:09 浏览: 163
详解element-ui中el-select的默认选择项问题
这种情况可能是因为在刷新页面时,el-select 组件的数据还没有完全加载完毕,导致 el-option 的 label 还没有正确地渲染出来。你可以尝试在 el-select 组件的父组件中添加一个 v-if 指令,确保 el-select 组件在数据完全加载后再渲染出来。例如:
```
<template>
<div v-if="optionsLoaded">
<el-select v-model="selectedOption">
<el-option label="选项一" value="1"></el-option>
<el-option label="选项二" value="2"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
optionsLoaded: false
}
},
mounted() {
// 模拟数据加载过程
setTimeout(() => {
this.optionsLoaded = true;
// 在数据加载完毕后,将选中项设置为 label 为 "选项一" 的项
this.$refs.select.setValue('1');
}, 2000);
}
}
</script>
```
这样,在 el-select 组件的父组件中添加 v-if 指令,并在数据加载完毕后将选中项设置为 label 为 "选项一" 的项,就能够避免 el-option 显示成 value 的问题了。
阅读全文