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

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文档,发现文档中有说

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

所以还是要好好看文档!!!
转载请注明出处:https://www.cnblogs.com/fangnianqin/p/8916738.html
vue2.0 element-ui中的el-select选择器无法显示选中的内容的更多相关文章
- vue2.0 + Element UI + axios实现表格分页
注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...
- C#中datagridview选中行后textbox显示选中的内容
我想让datagridview中某一行被选中时,textbox中显示选中的值,datagridview的选中模式是整行:this.dataGridView1.SelectionMode = DataG ...
- vue2.0 + element ui 实现表格穿梭框
element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...
- vue2.0+Element UI 表格前端分页和后端分页
之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...
- vue2.0+Element UI 实现动态表单(点击按钮增删一排输入框)
对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,我之前没有看见,绕了很多弯路,这里针对点击按钮增删一排输入框的问题做一个总结. 效果图如下 存在一排必填的姓名与手机号, ...
- Element ui 中使用table组件实现分页记忆选中
我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了 示例如下 <el-table :data="tableData&quo ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
- Element UI 中组件this.$message报错
最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...
- 关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
随机推荐
- 仿B站项目(4)webpack打包第三方库jQuery
概述 在项目中不可避免的会用到jquery等第三方库,来看看有什么问题,怎么解决. 遇到的问题 一般情况下,直接require第三方库,比如jquery,然后webpack会自动把第三方库打包进bun ...
- C#6.0语言规范(四) 类型
C#语言的类型分为两大类:值类型和引用类型.值类型和引用类型都可以是泛型类型,它们采用一个或多个类型参数.类型参数可以指定值类型和引用类型. type : value_type | reference ...
- Python九九乘法表三种方案
方法一: row = 1 # 定义起始行 while row <= 9: # 最大打印 9 行 col = 1 # 定义起始列 while col <= row: # 最大打印 row 列 ...
- odoo开发笔记 -- 翻译机制及导入.po文件
待补充 http://ju.outofmemory.cn/entry/181972
- 课程四(Convolutional Neural Networks),第三 周(Object detection) —— 0.Learning Goals
Learning Goals: Understand the challenges of Object Localization, Object Detection and Landmark Find ...
- .net core + headless chrome实现动态网页爬虫
一般的http请求库只能够抓取到网页的静态内容,如果想抓取通过js动态生成的内容可以使用没有gui的browser库,之前许多人会使用phantomjs作为headless browser,不过现在p ...
- oc中的oop基础及类的基本介绍
面向对象的(OOP)的基础知识 类(class):表示一组对象数据的结构体,对象通类来得到自身.类名首字母大写. 对象(objcet):是一种包含值和指向其类的隐藏指针的结构体.运行中的程序中通常会有 ...
- 从零开始学 Web 之 DOM(一)DOM的概念,对标签操作
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 BOM(四)client系列
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- vc++开发安装程序实例
前言 市面上有很多安装程序制作软件:但是,要实现个性化安装程序,还是自己动手来写一个更为妥当.本文介绍基本的安装程序制作的步骤. 安装程序界面: 安装程序可以分为几个功能点:1 资源的嵌入.释放.2 ...