解决element ui select下拉框不回显数据问题的解决


Posted in Javascript onFebruary 20, 2019

最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git
前端地址是 https://github.com/wangyuanjun008/wyj-vue-security.git ,使用的前端语言是vue,使用webpack构建vue-cli全家桶

在项目中用到 el-select 时遇到一个问题,就是在编辑表单时,下拉框的不显示数据,前台代码如下:

<el-select v-model="commonForm.status" clearable placeholder="请选择">
 <el-option v-for="item in items" :key="item.id" :label="item.text" :value="item.id" ></el-option>
</el-select>

在浏览器中查看列表返回的数据:

解决element ui select下拉框不回显数据问题的解决

在浏览器中查看下拉框数据源的数据:

解决element ui select下拉框不回显数据问题的解决

发现select下拉的id和v-model里边的id类型不一致,修改后台下拉框数据源返回类型,下拉框显示数据成功。

解决element ui select下拉框不回显数据问题的解决

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
jquery插件jTimer(jquery定时器)使用方法
Dec 23 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
vue 兄弟组件的信息传递的方法实例详解
Aug 30 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 Javascript
如何在vue中使用jointjs过程解析
May 29 Javascript
vue中用 async/await 来处理异步操作
Jul 18 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
Feb 20 #Javascript
Vue.js特性Scoped Slots的浅析
Feb 20 #Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 #Javascript
详解关于element级联选择器数据回显问题
Feb 20 #Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 #Javascript
echarts实现词云自定义形状的示例代码
Feb 20 #Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 #Javascript
You might like
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
一些使用频率比较高的php函数
2008/10/03 PHP
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
node.js中watch机制详解
2014/11/17 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
js html实现计算器功能
2018/11/13 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
微信小程序手动添加收货地址省市区联动
2020/05/18 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
wxPython中listbox用法实例详解
2015/06/01 Python
聊聊Python中的pypy
2018/01/12 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
Python装饰器语法糖
2019/01/02 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
自考毕业生自我鉴定
2013/11/04 职场文书
学生自我鉴定
2013/12/18 职场文书
《要下雨了》教学反思
2014/02/17 职场文书
cf收人广告词大全
2014/03/14 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
教师群众路线心得体会
2014/11/04 职场文书
2014年科技工作总结
2014/11/26 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
pandas求平均数和中位数的方法实例
2021/08/04 Python