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 相关文章推荐
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
js实现的tab标签切换效果代码分享
Aug 25 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
微信小程序switch开关选择器使用详解
Jan 31 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 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数据库连接类~~做成一个分页类!
2006/11/25 PHP
PHP PDO函数库详解
2010/04/27 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
javascript eval和JSON之间的联系
2009/12/31 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
Python中index()和seek()的用法(详解)
2017/04/27 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
百度JavaScript笔试题
2015/01/15 面试题
经验丰富大学生村干部自我鉴定
2014/01/22 职场文书
美术社团活动总结
2014/06/27 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
财产保全担保书
2015/01/20 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
深入理解go slice结构
2021/09/15 Golang
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python