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

更多专业前端知识，请上【猿2048】www.mk2048.com

vue2.0 element-ui中的el-select选择器无法显示选中的内容相关推荐

在Element UI中表格根据数据动态变化显示表格的内容
需求对于Element UI里的表格,如果假设传入data的数据为数字(事实上其他的字母之类的也可)代表为表格的一些固定选项,而不是直接传入字符串,怎样实现替换.比如对于某个表格的选项,传入的数据用 ...
C#中datagridview选中行后textbox显示选中的内容
我想让datagridview中某一行被选中时,textbox中显示选中的值,datagridview的选中模式是整行: this.dataGridView1.SelectionMode = Data ...
vue2.0 + element ui 实现表格穿梭框
element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...
element ui中穿梭框等列表文字显示过长隐藏问题处理
主要记录一下element ui组件中穿梭框.table列表内容显示不全解决方式对于Transfer 穿梭框中的文字过长隐藏问题处理: 1.实现效果: 解决方式; 1. <el-row :gu ...
关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
DataGear 制作基于Vue2、Element UI前端框架的数据可视化看板
DataGear 数据可视化看板内置了一些基本.简单的页面交互组件,当它们无法满足实际看板需求时,可以引入更流行和强大的前端框架. 本文以Vue2.Element UI前端框架为例,介绍如何制作具有更 ...
Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
【Vue2.0】—Vue中的key有什么作用？（四）
[Vue2.0]-Vue中的key有什么作用?(四) <div id="root"><ul><button @c ...
Vue2.0 --- vue-cli脚手架中全局引入JQ
第一步:安装jQuery npm/cmpn方式安装(默认安装1.7.X版本的JQ) npm/cnpm install jQuery 如果想安装更高版本的JQ那么可以选择在package.json文件下 ...

vue2.0 element-ui中的el-select选择器无法显示选中的内容

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

select.vue文件

selectdata.json文件

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

vue2.0 element-ui中的el-select选择器无法显示选中的内容相关推荐

最新文章

热门文章