element ui select下拉框不回显

这篇具有很好参考价值的文章主要介绍了element ui 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类型不一致。


解决方案:

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

element ui select下拉框不回显,vue,ui,vue.js,前端文章来源地址https://www.toymoban.com/news/detail-731742.html

到了这里,关于element ui select下拉框不回显的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element框架select值更新页面不回显的问题,动态表单props绑定问题

    当data中默认没有定义form.region的值时,会出现选择select后input没有回显选择数据值; 所以使用select时,必须定义默认值 强制重新加载页面@visible-change=“$forceUpdate()”

    2024年02月12日
    浏览(27)
  • el-select值的回显问题:如何使element-ui的下拉框显示label值

    今天写前端又遇到个很神奇的事情,element的下拉框el-select出现了一点儿问题,回显的时候显示value的值,这个强迫症看来就很难受  我写的代码是这样的 查阅大量资料,突然发现一个简单的方法,那就是vue的v-bind的神奇之处,v-bind的简写是:冒号 所以解决方法就来了(敲重

    2024年02月07日
    浏览(36)
  • 【UI】 elementUI的select-tree组合下拉框,选择后下拉框不收起

    问题: elementui 的 select 下拉框 搭配 树形菜单 tree 点击菜单 值虽然变化了,但select下拉框没收起 vue代码 1.给下拉框写个 ref 即 2.点击下拉框选项的时候判断值有没有赋值(即这个select下拉框的值有没有改变),写个监听,值改变了就收起树形菜单。 我这里是把下拉框 显示的

    2024年02月11日
    浏览(27)
  • Vue3+element ui取消el-select下拉选边框

    需求是: 取消下拉选的边框,并且修改下箭头的图标,从其他博主那拼凑修改出来的,适用于我项目的方法,在此做个记录 修改前 修改后 css样式

    2024年02月15日
    浏览(48)
  • 【vue2+element ui】添加修改共用表单的下拉框回显问题分析以及解决方案(附共用表单代码)

    简介 本人前端水平不佳,本文分享在编写个人项目前端代码的时候遇到的回显问题的解决办法,仅供参考。 问题复原 首先展示表单中的问题代码,本次前端的设计是添加和修改操作共用表单,但是其中有一个下拉框展示形式,按照惯例通过:value进行双向绑定,保证点击修改

    2024年02月07日
    浏览(33)
  • Vue 3 + Element UI Plus 实现 Select 下拉框的虚拟滚动效果详解与代码示例

    在 Vue 3 项目中,当下拉框中的选项过多时,使用虚拟滚动可以提升性能和用户体验。本文将介绍如何使用 Vue 3 和 Element UI Plus(el-select-plus)组件实现 Select 下拉框的虚拟滚动效果,并提供详细的代码示例。 首先,确保你已经安装了 Element UI Plus,它是 Element UI 的扩展版本,支

    2024年02月08日
    浏览(40)
  • Vue + element ui 实现后台数据渲染到下拉框选项中,同时将input框与下拉框联动,select选定之后,input显示对应的值

    实现过程: 使用element 的select以及input输入框 在data中定义一个数组用于接收后台请求的数据 method中定义一个方法,用于请求数据 在created中实现显示: listMidMapping为封装好的get请求 至此实现后台数据渲染到下拉框选项中,效果图: 以上借鉴于: (21条消息) Vue + element 实现动

    2024年02月08日
    浏览(28)
  • Vue 当页面进入全屏状态时element-ui的el-select下拉菜单不显示问题

    在前两天进行页面全屏时,一切都还好好的,可当使用element-ui中的el-select时,下拉菜单却怎么也显示不出来,但只要退出全屏状态,立马就好。 非全屏时:  全屏时: 开始我以为是层级问题,所以给el-select的下拉菜单加z-index,却发现加到多大都没用。 后来去官方文档里找

    2024年01月17日
    浏览(53)
  • layui下select下拉框不显示或没有效果

    弹层layer选择框没有样式_不可点击_渲染失效的解决办法 一、必须给表单体系所在的父元素加上 class=\\\" layui-form \\\" 在一个容器中设定 class=\\\"layui-form\\\"  来标识一个表单元素块,如果你不想用 form,你可以换成  div  等任何一个普通元素( 推荐用 form );记得要在 外层容器 中定

    2024年02月09日
    浏览(31)
  • element-ui select下拉框滚动加载更多

    当下拉框数据过多时,加载会非常慢,所以使用分页去显示,通过监听滚动事件来达到分页效果。 我是使用Vue自定义指令来做的。 一、首先在src下创建一个js文件,完成自定义指令的编写 有没有大神告诉我,自定义指令为啥在同一个页面不能使用多次? 二、在main.js中引入进来

    2024年02月16日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包