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

2023-11-09

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

1354858-20180423110340429-1217004808.png

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

1354858-20180423110738587-1072219950.png

我只是把下面绿色那句改成上面红色这句,就好了
1354858-20180423111037552-1762954675.png

所以还是要好好看文档!!!

转载请注明出处:https://www.cnblogs.com/fangnianqin/p/8916738.html

转载于:https://www.cnblogs.com/fangnianqin/p/8916738.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

  • 各种 Javascript 优化项目如何影响 DOM 性能?

    通过 Tracemonkey Squirrelfish 和 V8 项目 大量 C S 计算机科学融入了 Javascript 这些项目 或其他项目 是否解决了 DOM 操作的性能问题 或者它们纯粹与 Javascript 计算相关 纯 DO
  • 可以跨 iframe 共享 javascript 导入吗?

    我有一个 Web 应用程序 其中有多个 iframe 它们都需要导入相同的 javascript 库 例如 jquery 有没有办法只加载一次并以某种方式在所有 iframe 之间共享该数据 我不想让我的页面加载缓慢 因为它为每个 ifra
  • 克隆表行

    我怎样才能使用javascript 我假设 来克隆一个表格行 就像下图所示的那样 您可以将现场活动连接到所有按钮 例如 如果您给他们一类克隆 则以下内容将起作用 input clone live click function put jqu
  • Javascript 字符串/整数比较

    我在 HTML 中存储一些客户端参数 然后需要将它们作为整数进行比较 不幸的是我遇到了一个我无法解释的严重错误 该错误似乎是我的 JS 将参数读取为字符串而不是整数 导致我的整数比较失败 我生成了一个错误的小例子 我也无法解释 运行时以下返
  • 如何捕获jquery中的任何点击事件[重复]

    这个问题在这里已经有答案了 我有一个按钮 当单击它时 会显示一个带有图像的 div 例如聊天的表情符号面板 如果我再次单击它 div 会隐藏 但我想要做的是 如果 div 已经显示 然后我单击页面的任何其他内容 我想隐藏它 我试过这个 my
  • 获取访客的 Optimizely A/B 测试和变化

    当我在网站上运行实验时 我希望能够找出当前访问者看到的测试和变体 我无法找到如何做到这一点优化Javascript API https www optimizely com docs api 您可以获得第一个正在运行的实验的 ID 假设您有
  • 防止 Node.js 中的 SQL 注入

    是否有可能以与 PHP 具有防范 SQL 注入的预准备语句相同的方式防止 Node js 中的 SQL 注入 最好使用模块 如果是这样 怎么办 如果不 有哪些例子这可能会绕过我提供的代码 见下文 一些背景 我正在制作一个 Web 应用程序
  • 在 Javascript 中隐藏按钮

    在我最新的程序中 有一个按钮 单击时会显示一些输入弹出框 这些框消失后 如何隐藏按钮 You can set its visibility财产 http www w3schools com cssref pr class visibilit
  • 使用 java.util.Set 时的 Jackson bug(或功能!?) - mySet.size() 始终为 1

    我正在使用 Jackson 2 2 0 和 Spring 3 2 0 以及 Hibernate 4 2 2 我最近不得不通过 POST 向服务器发送一组对象 cancelationDate 2013 06 05 positions pric
  • `forEach` 函数中的 `return` 关键字是什么意思? [复制]

    这个问题在这里已经有答案了 button click function 1 2 3 4 5 forEach function n if n 3 it should break out here and doesn t alert anyth
  • 将jQueryUI datepicker附加到div(显示位置错误)

    我在输入上使用 jQueryUI datepicker 默认情况下 jQueryUI 会附加 ui datepicker div to the body该文件的 有问题的输入位于屏幕上的 弹出 div 中 这意味着该 div 之外的任何点击
  • 如何在 Google 地图上旋转叠加图像?

    我正在尝试将一系列叠加层放置到 Google 地图上 我正在跟随地面覆盖层的示例代码 https developers google com maps documentation javascript examples groundover
  • 无法在 PHP 中接收 JSON POST 请求

    我正在将 JSON 对象从 Java 传递到 PHP 我正在使用 jdk 1 8 和 WAMPserver 下面是Java代码 import java io IOException import org apache http client
  • 发送带有图像的嵌套 JSON

    我一直在尝试研究一种能够通过 Ajax 将嵌套 JSON 请求发送回服务器的方法 根据我的理解 我们主要用于向服务器发送图像或文件的 formdata 在这种情况下不起作用 因为 FormData 似乎不处理嵌套对象 这就是我需要发送的有效
  • 在 Javascript 中实现 Zobrist 哈希

    我需要在 Javascript 中为国际象棋引擎实现 Zobrist 哈希 我想知道实现此目的的最佳方法是什么 现在 我不是计算机科学家 也从未上过正式的算法和数据结构课程 所以如果我在这方面有点偏离 我很抱歉 据我了解 我需要一个 64
  • JQuery mouseover 函数多次触发

    我很长时间以来一直使用这种方法来为整个类 按钮等 设置事件 div bigButton mouseover function this style backgroundColor dfdfdf 然而 在进行一些测试时 我刚刚注意到 当将鼠标
  • 提交外部有 INPUT 的表单,并修改值后

    我有一个form 有几个
  • 如何转义 onClick 处理程序内 JavaScript 代码中的字符串?

    也许我只是想得太难了 但我在弄清楚链接的 onClick 处理程序内的某些 JavaScript 代码中的字符串上使用什么转义时遇到了问题 例子 a href Select a The and 是发生模板替换的地方 我的问题是项目名称可以包
  • 如何使用 jQuery 解析 JavaScript 对象

    jQuery JavaScript 中用于解析 JSON 对象并返回键 值对的 foreach 等效项是什么 JSON 对象 是什么意思 JSON 是一种用于序列化对象的文本格式 如果要循环访问通过反序列化 JSON 字符串获得的对象中的属
  • Json.net 将数字属性序列化为字符串

    我正在使用 JsonConvert SerializeObject 序列化模型对象 服务器期望所有字段都是字符串 我的模型对象具有数字属性和字符串属性 我无法向模型对象添加属性 有没有办法将所有属性值序列化为字符串 我必须只支持序列化 而不

随机推荐

  • Hexo Theme NexT 主题个性化配置最佳实践

    一般情况下 当我们在使用 Hexo 的 NexT 主题时 都希望把博客改造成自己喜欢的风格 NexT 主题经过不断的迭代积累 目前提供了非常丰富的配置来满足使用者的个性化需求 经过一段时间的摸索 我总结了一些有关 NexT 主题配置的最佳实
  • 深入浅出Yolo系列之Yolov3&Yolov4&Yolov5&Yolox核心基础知识完整讲解

    因为工作原因 项目中经常遇到目标检测的任务 因此对目标检测算法会经常使用和关注 比如Yolov3 Yolov4算法 Yolov5算法 Yolox算法 当然 实际项目中很多的第一步 也都是先进行目标检测任务 比如人脸识别 多目标追踪 REID
  • Java对象导论,什么是对象

    在think in Java一书中这样表述对象 1 万物皆为对象 将对象视为奇特的变量 它可以存储数据 除此之外 你还可以要求它在自身上执行操作 理论上讲 你可以抽取待求解问题的任何概念化构建 狗 建筑物 服务 等 将其表示为程序中的对象
  • leaflet中fitBounds方法带来的问题

    这个方法用leaflet的同学都用过 可当没有图层的时候添加一个图层用这个方法定位就会出现不能再缩小的问题 第一个图层建议用setview方法 这样不会增加特殊属性minzoom
  • 优化算法——全局灵敏度分析算法(PAWN )(Matlab代码实现)

    欢迎来到本博客 本文目录如下 目录 1 概述 2 使基于SWAT 的高参数模型的 PAWN 和 Sobol 敏感性分析方法的比较 3 Matlab代码实现 1 概述 大量参数是复杂环境模型的主要问题 因为它限制了它们的应用 因此 旨在识别模
  • 华为ICT大赛实践赛备赛经验总结

    华为ICT大赛备赛经验总结 1 比赛形式 去年的省赛是个人赛形式 只有笔试 满分1000分 题目类型为 判断正误 单选 多选 省赛是考试的形式 最后取全校前三作为学校的代表队 然后和其他学校的代表队进行比较 分数最高的进入到国赛 国赛有实践
  • ES返回值数量超过10000条解决方式

    现象 ES默认返回数据量为10000条 当分页的from超过10000条的时候 es就会如下报错 Result window is too large from size must be less than or equal to 1000
  • 【JavaScript】关于手机中的触摸手势操作实现过程详解

    这里实现触摸手势操作的有四个基本方向 上 下 左 右 用javascript语言编写 可以参考下 笔者TA远方在一个文件名为gesture js写了 定义触摸操作中的所有手势 一共8个总方向 包括四个基本方向 还有一个点击 代码如下 con
  • 注解方式开发Servlet程序

    一 注解方式开发Servlet程序 package cn tedu servlet import javax servlet ServletException import javax servlet annotation WebServl
  • Spring MVC中如何使用forward进行请求转发呢?

    转自 Spring MVC中如何使用forward进行请求转发呢 下文讲述Spring MVC进行请求转发的2种方式简介说明 如下所示 Spring MVC种forward请求是一种服务器端请求方式 它无需通过客户端 可以提高系统的转发速度
  • linux sort uniq -c

    文档编辑 sort 功能说明 将文本文件内容加以排序 语 法 sort bcdfimMnr o lt 输出文件 gt t lt 分隔字符 gt lt 起始栏位 gt lt 结束栏位 gt help verison 文件 补充说明 sort可
  • Vue+element 首页业务实现

    接着上篇登录后 登录表单数据发送给服务器 验证成功后返回token口令 储存到浏览器会话窗口 方便登录过后的一些请求发送 统一封装的 axios 配置axios import axios from axios 请求的根路径 axios de
  • 京东苹果商品信息爬取(纯代码)

    from selenium import webdriver from selenium webdriver chrome service import Service from selenium webdriver common by i
  • 阿里云磁盘格式由MBR调整为GPT步骤示例

    阿里云磁盘容量大于2T时 需要将默认磁盘格式MBR 调整为GPT 且调整磁盘格式后 不可以使用磁盘快照回滚 来恢复磁盘里面的内容 磁盘快照也是原MBR格式的 oss扩容 直接升级到2T 磁盘扩容步骤示例 1 停止D盘的tomcat等服务 2
  • 正交矩阵

    UUT UTU I U U T U T U I
  • git format-patch

    转自 https blog csdn net wsclinux article details 53842418 1使用git format patch生成所需要的patch 当前分支所有超前master的提交 git format pat
  • docker安装postgresql 以及源码安装odoo12(全过程)

    通用命令 实时查看docker容器日志 docker container stop start nexus docker container stop start redis docker ps a 列出所有的容器 docker rm 容器
  • 国内达梦数据库相关函数-时间日期

    http blog itpub net 69995127 viewspace 2758308
  • 【Leetcode】比较版本号 c++

    题目描述 给你两个版本号 version1 和 version2 请你比较它们 版本号由一个或多个修订号组成 各修订号由一个 连接 每个修订号由 多位数字 组成 可能包含 前导零 每个版本号至少包含一个字符 修订号从左到右编号 下标从 0
  • vue2.0 element-ui中的el-select选择器无法显示选中的内容

    我使用的是element ui V2 2 3 代码如下 当我选择值得时候 el select选择器无法显示选中的内容 但是能触发change方法 并且能输出选择的值 select vue文件