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类型不一致。


解决方案:

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

在这里插入图片描述

目录
相关文章
|
3天前
|
JavaScript
基于Element UI或Element Plus实现具有倒计时的Message消息提示
本文介绍了如何在Element UI或Element Plus框架中实现具有倒计时功能的消息提示组件,支持多次点击生成多个独立倒计时的消息提示,并提供了详细的实现代码和使用示例。
13 1
基于Element UI或Element Plus实现具有倒计时的Message消息提示
|
3天前
|
JavaScript UED
基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框
该文章介绍了如何基于Vue2.0仿照Element UI的el-tooltip组件实现一个自定义的气泡框组件,该组件能够根据内容是否为空智能显示或隐藏,支持多种数据类型的显示。
11 0
基于Vue2.0仿Element UI的el-tooltip实现一个气泡框组件,支持多数据类型的显示和内容为空时不显示气泡框
|
3天前
|
JavaScript 开发者
Element UI & Element Plus之改变表格单元格颜色
这篇文章展示了如何在Element UI和Element Plus框架中使用`:cell-style`属性来根据条件改变表格单元格的颜色。
18 0
Element UI & Element Plus之改变表格单元格颜色
|
3天前
|
JavaScript 前端开发
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤,以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框,在输入时对列表选项进行过滤,并支持右键点击列表选项弹出菜单进行删除的功能。
5 0
|
3天前
|
JavaScript 容器
Vue+Element UI
该博客文章介绍了如何在Vue中集成Element UI来构建后台管理系统的左侧菜单,包括使用`el-menu`、`el-submenu`和`el-menu-item`等组件,并通过Vue router动态构建菜单项及其路由设置。
|
1月前
|
JavaScript
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起
47 1
|
1月前
|
JavaScript 前端开发
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面,显示空白bug不能编辑
159 0
|
1月前
|
UED
Element UI 一键校验多表单(v-for循环表单,异步校验规则,v-for 中的 ref 属性,避坑 forEach 不支持异步 await )
Element UI 一键校验多表单(v-for循环表单,异步校验规则,v-for 中的 ref 属性,避坑 forEach 不支持异步 await )
27 0
|
1月前
|
数据安全/隐私保护
Element UI 密码输入框--可切换显示隐藏,自定义图标
Element UI 密码输入框--可切换显示隐藏,自定义图标
59 0
|
1月前
Element UI 表格【列宽自适应】
Element UI 表格【列宽自适应】
31 0