vue.js elementUI中的 el-talbe 内嵌el-input el-select无法编辑,视图不刷新(更新)_el-table 使用input 编辑不了-程序员宅基地

技术标签: vue  elementui  组件  

vue.js elementUI中的 el-talbe 内嵌el-input el-select无法编辑,视图不刷新(更新)

在开发中遇到一个关于element UI中el-table里的数据内嵌el-input 和el-select后无法编辑修改内容,视图无法刷新的问题。(实际上内容是更改了的)
引用:https://linzhji.blog.csdn.net/article/details/105333731

在这里插入图片描述

 <Qtable
                :tableData="tableListA"
                :tableHead="tableHeadA"
                :toolBar="toolBarA"
                :loading="loading"
                index
                fixedSort="left"
                :footer="footers"
                @handler="handler"
                :border="tableBorder"
                :headerAlign="headerAlign"
              >
                <template slot="slot" slot-scope="scope">
                  <div v-if="scope.data.prop === 'voteNum'" style="width: 100%">
                    <el-input
                     @input="inputChange(scope.data.row.index)"
                      @blur="inputChange(scope.data.row.index)"
                      @change="validateVote"
                      style="width: 100%"
                      v-model="scope.data.row.voteNum"
                      placeholder="请输入得票数"
                      type="text"
                    ></el-input>
                  </div>
                  <div v-if="scope.data.prop === 'isElected'">
                    <el-select
                     @input="inputChange(scope.data.row.index)"
                      @blur="inputChange(scope.data.row.index)"
                      style="width: 100%"
                      v-model="scope.data.row.isElected"
                      placeholder="请选择"
                    >
                      <el-option label="是" :value="1"></el-option>
                      <el-option label="否" :value="2"></el-option>
                    </el-select>
                  </div>
                </template>
              </Qtable>
              //Qtable是我基于el-table封装的table组件

经过百度和多次尝试,发现使用输入框的input事件来监听可以解决这个问题@input=“change(scope.$index)”
vue.js

  // 解决element UI输入框输入不显示的情况
    inputChange(idx) {
    
      console.log("idx", idx);
        // 委员选举结果
          let tmpObj = this.tableList[idx];
          this.$set(this.tableList, idx, tmpObj);
          //使用vue自带的$set方法传入三个参数(需要更新的对象,key,value)进行手动更新数据.更新该行数据   },

问题总算是解决了,但我又发现另一种解决办法,如果使用原生的html标签(input,select)替代el-input和el-select,那么这个问题也可以得到解决,也就不用监听input事件进行强制刷新了!至于为什么会这样还在研究中,欢迎有志之士一起探讨!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/MrDeng_web2018/article/details/112449247

智能推荐

彻底扒光 通过智能路由器拆解看其本质-程序员宅基地

文章浏览阅读1.7k次。可以看到很多联发科的MT芯片摘自:https://net.zol.com.cn/531/5312999.html彻底扒光 通过智能路由器拆解看其本质2015-07-23 00:40:00[中关村在线 原创] 作者:陈赫|责编:白宁收藏文章 分享到 评论(24)关注智能路由器拆解的朋友们注意啦!我们已经将这五款产品彻底扒开,将主板的真容展现在了大家的眼前。网友们可以看见这些智能路由器主板的做工和用料,我们还为网友们展示了主要的电子元器件,供大家品评观赏。..._路由器拆解

Java--深入JDK和hotspot底层源码剖析Thread的run()、start()方法执行过程_jdk的源码hotspot跟jdk是分开的-程序员宅基地

文章浏览阅读2.1k次,点赞101次,收藏78次。【学习背景】今天主要是来了解Java线程Thread中的run()、start()两个方法的执行有哪些区别,会给出一个简单的测试代码样例,快速理解两者的区别,再从源码层面去追溯start()底层是如何最终调用Thread#run()方法的,个人觉得这样的学习不论对面试,还是实际编程来说都是比较有帮助的。进入正文~学习目录一、代码测试二、源码分析2.1 run()方法2.2 start()方法三、使用总结一、代码测试执行Thread的run()、start()方法的测试代码如下:public_jdk的源码hotspot跟jdk是分开的

透视俄乌网络战之一:数据擦除软件_俄乌网络战观察(一)-程序员宅基地

文章浏览阅读4.4k次,点赞90次,收藏85次。俄乌冲突中,各方势力通过数据擦除恶意软件破坏关键信息基础设施计算机的数据,达到深度致瘫的效果,同时窃取重要敏感信息。_俄乌网络战观察(一)

Maven私服仓库配置-Nexus详解_nexus maven-程序员宅基地

文章浏览阅读1.7w次,点赞23次,收藏139次。Maven 私服是一种特殊的Maven远程仓库,它是架设在局域网内的仓库服务,用来代理位于外部的远程仓库(中央仓库、其他远程公共仓库)。当然也并不是说私服只能建立在局域网,也有很多公司会直接把私服部署到公网,具体还是得看公司业务的性质是否是保密的等等,因为局域网的话只能在公司用,部署到公网的话员工在家里也可以办公使用。_nexus maven

基于AI的计算机视觉识别在Java项目中的使用 (四) —— 准备训练数据_java ocr ai识别训练-程序员宅基地

文章浏览阅读934次。我先用所有的样本数据对模型做几轮初步训练,让深度神经模型基本拟合(数万条记录的训练集,识别率到99%左右),具备初步的识别能力,这时的模型就是“直男”。相较于训练很多轮、拟合程度很高的“油腻男”,它的拟合程度较低,还是“直男愣头青”。..............._java ocr ai识别训练

hibernate 数据库类型 date没有时分秒解决_hibernate解析時間只有年月日沒有時分秒-程序员宅基地

文章浏览阅读688次。一、问题现象:  在数据库表中日期字段中存的日期光有年月日,没有时分秒。二、产生原因:三 解决办法   检查表的相应映射xml文件。 <property name="operateDate" type="Date">如果同上面所写,那问题出在 type类型上了正确写法 :<property name="operateDate" type="java.util..._hibernate解析時間只有年月日沒有時分秒

随便推点

springbbot运行无法编译成功,找不到jar包报错:Error:(3, 46) java: 程序包org.springframework.context.annotation不存在-程序员宅基地

文章浏览阅读1k次,点赞2次,收藏2次。文章目录问题描述:解决方案:问题描述:提示:idea springbbot运行无法编译成功,找不到jar包报错E:\ideaProject\demokkkk\src\main\java\com\example\demo\config\WebSocketConfig.javaError:(3, 46) java: 程序包org.springframework.context.annotation不存在Error:(4, 46) java: 程序包org.springframework.conte_error:(3, 46) java: 程序包org.springframework.context.annotation不存在

react常见面试题_recate面试-程序员宅基地

文章浏览阅读6.4k次,点赞6次,收藏36次。1、redux中间件中间件提供第三方插件的模式,自定义拦截 action -&gt; reducer 的过程。变为 action -&gt; middlewares -&gt; reducer 。这种机制可以让我们改变数据流,实现如异步 action ,action 过滤,日志输出,异常报告等功能。常见的中间件:redux-logger:提供日志输出redux-thunk:处理异步操作..._recate面试

交叉编译jpeglib遇到的问题-程序员宅基地

文章浏览阅读405次。由于要在开发板中加载libjpeg,不能使用gcc编译的库文件给以使用,需要自己配置使用另外的编译器编译该库文件。/usr/bin/ld:.libs/jaricom.o:RelocationsingenericELF(EM:40)/usr/bin/ld:.libs/jaricom.o:RelocationsingenericELF(EM:40)...._jpeg_utils.lo: relocations in generic elf (em: 8) error adding symbols: file

【办公类-22-06】周计划系列(1)“信息窗” (2024年调整版本)-程序员宅基地

文章浏览阅读578次,点赞10次,收藏17次。【办公类-22-06】周计划系列(1)“信息窗” (2024年调整版本)

SEO优化_百度seo resetful-程序员宅基地

文章浏览阅读309次。SEO全称为Search Engine Optimization,中文解释为搜索引擎优化。一般指通过对网站内部调整优化及站外优化,使网站满足搜索引擎收录排名需求,在搜索引擎中提高关键词排名,从而把精准..._百度seo resetful

回归预测 | Matlab实现HPO-ELM猎食者算法优化极限学习机的数据回归预测_猎食者优化算法-程序员宅基地

文章浏览阅读438次。回归预测 | Matlab实现HPO-ELM猎食者算法优化极限学习机的数据回归预测_猎食者优化算法

推荐文章

热门文章

相关标签