解决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 相关文章推荐
JQuery 简便实现页面元素数据验证功能
Mar 24 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 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
初级的用php写的采集程序
2007/03/16 PHP
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
Python Unittest自动化单元测试框架详解
2018/04/04 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
python训练数据时打乱训练数据与标签的两种方法小结
2018/11/08 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
django API 中接口的互相调用实例
2020/04/01 Python
Python如何对XML 解析
2020/06/28 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
python中的插入排序的简单用法
2021/01/19 Python
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
个人收入证明范本
2014/01/12 职场文书
教师辞职报告范文
2014/01/20 职场文书
银行授权委托书范本
2014/10/04 职场文书
公司股东出资证明书
2014/11/01 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书