我使用的是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选择器无法显示选中的内容的更多相关文章

  1. vue2.0 + Element UI + axios实现表格分页

    注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...

  2. C#中datagridview选中行后textbox显示选中的内容

    我想让datagridview中某一行被选中时,textbox中显示选中的值,datagridview的选中模式是整行:this.dataGridView1.SelectionMode = DataG ...

  3. vue2.0 + element ui 实现表格穿梭框

    element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...

  4. vue2.0+Element UI 表格前端分页和后端分页

    之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...

  5. vue2.0+Element UI 实现动态表单(点击按钮增删一排输入框)

    对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,我之前没有看见,绕了很多弯路,这里针对点击按钮增删一排输入框的问题做一个总结. 效果图如下 存在一排必填的姓名与手机号, ...

  6. Element ui 中使用table组件实现分页记忆选中

    我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了 示例如下 <el-table :data="tableData&quo ...

  7. 关于Element UI中select组件中遇到的问题

    问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...

  8. Element UI 中组件this.$message报错

    最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...

  9. 关于Element UI中页面样式小问题

    一,修改组件dialog窗口的大小 二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...

随机推荐

  1. 【leetcode】 算法题2 两数相加

      问题      给定两个非空链表来表示两个非负整数.位数按照逆序方式存储,它们的每个节点只存储单个数字.将两数相加返回一个新的链表. 你可以假设除了数字 0 之外,这两个数字都不会以零开头. 示例 ...

  2. log4j学习(二) 不要用log4j了,用slf4j + logback吧

    标题比较尴尬,log4j学习系列的最后一篇是放弃log4j    - -!  一. 简介 log4j的作者提出了slf4j,简单日志门面,相当于是一套统一的java日志api,是个接口标准,编程时使用 ...

  3. Android 上传文件到 FTP 服务器

    实现背景 近期接触到一个需求,就是将文件从Android系统上传到FTP服务器,虽然之前接触过FTP服务器,了解基本的使用流程,但是将此流程从使用习惯转化为代码实现还是有一定难度的.但是基本的流程还是 ...

  4. python循环语句详细讲解

    想必大家都知道python循环语句吧,可以python循环语句有多种,比如for循环.while循环.if.else等等,   我们可以通过设置条件表达式永远不为 false 来实现无限循环,实例如下 ...

  5. IDEA搭建SSM实现登录、注册,数据增删改查功能

     本博文的源代码:百度云盘/java/java实例/SSM实例/SSM实现登录注册,增删改查/IDEA搭建SSM实现登录,注册,增删改查功能.zip 搭建空的Maven项目 使用Intellij id ...

  6. css选择符权重

    css选择符权重 目录 css选择符权重 css选择器权重列表 CSS选择符冲突处理 css选择符权重 css选择器权重列表 选择器 权重 内联样式 1000 ID 0100 CLASS 0010 属 ...

  7. 微服务开发有道之把项目迁移到Kubernetes上的5个小技巧

    我们将在本文中提供5个诀窍帮你将项目迁移到Kubernetes上,这些诀窍来源于过去12个月中OpenFaas社区的经验.下文的内容与Kubernetes 1.8兼容,并且已经应用于OpenFaaS ...

  8. 使用Let's Encrypt加密你的小站

    介绍 Let's Encrypt是一个免费并且开源的CA,且已经获得Mozilla.微软等主要浏览器厂商的根授信.它极大低降低DV证书的入门门槛,进而推进全网的HTTPS化. Certbot is a ...

  9. JavaSE-关键字final

    final修饰数据: final修饰基本数据类型,使数值恒定不变,修饰对象引用,final使引用恒定不变 final修饰的成员变量必须要被初识化 final可以修饰方法中的参数列表,被修饰的参数无法在 ...

  10. 用node.js写一个jenkins发版脚本

    背景 每次到网页里手动发版有点烦,写个脚本来提高开发效率. CFG 在 jenkins 设置里获取 API TOKEN. 把 host 和账号密码拼接起来就可以通过鉴权. const token = ...