vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)


Posted in Javascript onAugust 24, 2018

我使用的是element-ui V2.2.3。代码如下,当我选择值得时候,el-select选择器无法显示选中的内容,但是能触发change方法,并且能输出选择的值。

vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)

select.vue文件

<template>
 <div>
 <div class="row" v-for="RowItem in rows">
  <div class="col" v-for="colItem in RowItem.configVos">
  <el-select v-model="formData[colItem.paramCode]" :class="getModel(colItem.paramCode)" @change="onSelectChange(colItem.paramCode,formData[colItem.paramCode])">
   <el-option v-for="option in colItem.configOptions" :label="option.optionCode" 
   :value="option.optionValue" >
   </el-option>
 </el-select>
  </div> 
 </div> 
 </div> 
</template>
<script>
 import axios from 'axios';
 export default {
 data() {
  return {
  groupItem:{},
  formData:{},
  rows:'',
  cols:''
  }
 },
 watch:{
 },
 methods:{  
  getfordata:function(){
  var _this = this;
  axios.get('../json/selectdata.json')
  .then(function(res){
   _this.groupItem = res.data;
   var row = _this.groupItem[0].rowData;
   _this.rows = row;  
   for(var i=0;i<row.length;i++){
   var col = row[i].configVos;   
   for(var j=0;j<col.length;j++){ 
    var key = col[j];    
    _this.formData[key.paramCode] = '';  
   }
   }   
  })
  },
  onSelectChange:function(key,val){
  console.log(val);
  },
  getModel(model) {
  console.log(model);
  }
 },
 created:function(){
  this.getfordata();
 }
 }
</script>
<style scoped>
 .col{
 float:left;
 }
 .row{
 width:800px;
 height:100px;
 }
</style>

selectdata.json文件

[
 {
 "groupName": "抽数转换",
 "rowData": [
 {
 "configVos": [
  {
  "configOptions": [
  {
  "id": "D",
  "optionCode": "否",
  "optionValue": "0",
  "paramId": "4"
  },
  {
  "id": "5",
  "optionCode": "是",
  "optionValue": "1",
  "paramId": "4"
  }
  ],
  "id": "4E",
  "paramCode": "isView",
  "paramValue": "0"
  },
  {
  "configOptions": [
  {
  "id": "4",
  "optionCode": "老版本",
  "optionValue": "0",
  "paramId": "4"
  },
  {
  "id": "4",
  "optionCode": "新版本",
  "optionValue": "1",
  "paramId": "44"
  }
  ],
  "id": "24",
  "paramCode": "isDeleteCbnd",
  "paramValue": "1"
  }
 ]
 },
 {
 "configVos": [
  {
  "configOptions": [
  {
  "id": "EF",
  "optionCode": "估值2.5",
  "optionValue": "0",
  "paramId": "1"
  },
  {
  "id": "8B",
  "optionCode": "估值2.5+qd",
  "optionValue": "1",
  "paramId": "131"
  },
  {
  "id": "06",
  "optionCode": "恒生2.5",
  "optionValue": "2",
  "paramId": "1"
  },
  {
  "id": "25BF",
  "optionCode": "估值4.5",
  "optionValue": "3",
  "paramId": "31"
  }
  ],
  "id": "31",
  "paramCode": "converType",
  "paramValue": "0"
  },
  {
  "configOptions": [
  {
  "id": "1366",
  "optionCode": "万德",
  "optionValue": "0",
  "paramId": "98"
  },
  {
  "id": "EC",
  "optionCode": "聚源",
  "optionValue": "1",
  "paramId": "8"
  }
  ],
  "id": "91F8",
  "paramCode": "zxDataSource",
  "paramValue": "0"
  }
 ]
 },
 {
 "configVos": [
  {
  "configOptions": [
  {
  "id": "CD",
  "optionCode": "期货占用",
  "optionValue": "HS",
  "paramId": "5C"
  },
  {
  "id": "91508011",
  "optionCode": "其它",
  "optionValue": "YYS",
  "paramId": "91C"
  }
  ],
  "id": "5C",
  "paramCode": "derivativeDataSource",
  "paramValue": "HS"  
  }
 ]
 }
 ]
 }
]

后来去看了Vue文档,发现文档中有说

vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)

我只是把下面绿色那句改成上面红色这句,就好了

vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)

总结

以上所述是小编给大家介绍的vue2.0 element-ui中el-select选择器无法显示选中的内容,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
如何构建 vue-ssr 项目的方法步骤
Aug 04 Javascript
JavaScript原型链与继承操作实例总结
Aug 24 #Javascript
element-ui循环显示radio控件信息的方法
Aug 24 #Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 #Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 #Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 #Javascript
Vue源码解读之Component组件注册的实现
Aug 24 #Javascript
element-ui 关于获取select 的label值方法
Aug 24 #Javascript
You might like
PHP 写文本日志实现代码
2010/05/18 PHP
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
JavaScript实现表格排序方法
2013/06/14 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
微信小程序实战之自定义抽屉菜单(7)
2017/04/18 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
原生JS封装拖动验证滑块的实现代码示例
2020/06/01 Javascript
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
使用Python将数组的元素导出到变量中(unpacking)
2016/10/27 Python
python 生成器协程运算实例
2017/09/04 Python
python里使用正则的findall函数的实例详解
2017/10/19 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
Python列表list排列组合操作示例
2018/12/18 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
Python While循环语句实例演示及原理解析
2020/01/03 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
股权转让意向书
2014/04/01 职场文书
工作保证书范文
2014/04/29 职场文书
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python