Vue element ui 中 select 下拉框不回显

简介: select 下拉不回显

Vue element ui 中 select 下拉框不回显:

项目场景:最近在使用vue element-ui 写后台时候,发现select 下拉不回显,于是发现问题,记录


问题描述

例如:数据传输过程中数据不时出现丢失的情况,偶尔会丢失一部分数据
APP 中接收数据代码:

<el-form-item label="企业性质" prop="nature">
      <el-select v-model="temp.nature" placeholder="请选择" style="width: 200px;">
               <el-option
                v-for="item in companyNatureList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                style="width: 200px;overflow: hidden;text-overflow: ellipsis"/>
      </el-select>
</el-form-item>

data中初始值

companyNatureList: [{'label': '专业公司', 'value': '1'}, 
    {'label': '基础电信企业', 'value': '2'}]

请求返回值

createDate: "2022-10-11 14:19:27"
defaultFlag: 0
delFlag: "0"
id: "7cf2497cd7984f46b9e65f4360050183"
name: "xx"
nature: 1
region: 110000
type: 1

其中:nature为需要回显的值


原因分析:

提示:这里填写问题的分析:

发现select下拉的id和v-model里边的id类型不一致。


解决方案:

修改后台下拉框数据源返回类型,下拉框显示数据成功

在这里插入图片描述

目录
相关文章
|
4月前
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
265 5
Vue使用element中table组件实现单选一行
|
4月前
|
JavaScript
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板,包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
Ant Design Vue UI框架的基础使用,及通用后台管理模板的小demo【简单】
|
3月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
259 0
|
3月前
|
资源调度 JavaScript PHP
Vue3+ element plus 前后分离admin项目安装教程
Vue3+ element plus 前后分离admin项目安装教程
107 0
|
5月前
|
JavaScript 前端开发 安全
[译] 在 Vue 组件中分离 UI 和业务逻辑。
[译] 在 Vue 组件中分离 UI 和业务逻辑。
|
5月前
|
开发者 C# Android开发
明白吗?Xamarin与Native的终极对决:究竟哪种开发方式更适合您的项目需求,让我们一探究竟!
【8月更文挑战第31天】随着移动应用开发的普及,开发者面临多种技术选择。本文对比了跨平台解决方案Xamarin与原生开发方式的优势与劣势。Xamarin使用C#进行跨平台开发,代码复用率高,可大幅降低开发成本;但因基于抽象层,可能影响性能。原生开发则充分利用平台特性,提供最佳用户体验,但需维护多套代码库,增加工作量。开发者应根据项目需求、团队技能和预算综合考量,选择最适合的开发方式。
141 0
|
5月前
|
JavaScript 前端开发 开发者
决战前端之巅!Element UI与Vuetify谁才是Vue.js组件界的霸主?一场关于颜值与实力的较量!
【8月更文挑战第30天】本文对比了两款热门的Vue.js组件库——Element UI与Vuetify。Element UI由饿了么团队打造,提供多种高质量UI组件,设计简洁大方。Vuetify基于Material Design规范,支持Vue.js 2.0及3.0版本,具备前瞻性。两者均涵盖表单、导航、数据展示等组件,Element UI配置选项丰富,而Vuetify则提供了更深层的样式定制功能。开发者可根据项目需求及个人偏好选择合适的组件库。
420 0
|
5月前
|
JavaScript 开发者 UED
Vue.js组件库大对决:Element UI与Vuetify,开发者的罗密欧与朱丽叶!
【8月更文挑战第30天】Element UI和Vuetify是Vue.js开发中的热门组件库,前者简洁高效,后者遵循Material Design,国际化程度高。两者均提供丰富的组件支持,但Vuetify组件更多样,设计更灵活;Element UI在性能和中文支持上更优。文档方面,Element UI更直观易懂,而Vuetify配置灵活但学习成本稍高。选择时需综合考虑项目需求、团队背景及设计风格,以达到最佳开发效果。
305 0
|
21天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
111 1
|
1天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
10 1

热门文章

最新文章