element-UI el-table修改input值视图不更新问题

 更新时间:2024年02月29日 09:20:47   作者:代码の搬运工  
这篇文章主要介绍了element-UI el-table修改input值视图不更新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

问题

1.input框通过v-model=“scope.row.molecule”

绑定的值去修改,控制台打印输出的是正确修改的值。

但是视图不跟新

 <input class="inputs" type="text"v-model="scope.row.molecule">

2.通过监听@input事件去修改当前行里面的数组数据

控制台打印也是能正确输出

但视图还是不更新

 <input @input="changeMolecule($event,scope.row)" class="inputs" type="text" 
 			 v-model="scope.row.molecule">

changeMolecule(event, row) {
	row.molecule=event.target.value
},

3.通过监听@input事件去调用this.$set()改变数据

控制台打印输入也是正确输出

视图还是不更新

changeMolecule(data, index, row) {
  this.topicList.forEach(item=>{
    if(item.targetId===row.targetId){
      this.$set(item,'molecule',row.molecule)
    }
  })
},

解决方法

还是通过this.$set(),但是不能直接去修改对象里的某一个值

因为el-table监听的是一整行数据,并不是某一个单元格

所以需要重新赋值一整行数据

 <el-table :data="topicList" border height="60vh" style="width: 100%">
   <el-table-column label="指标" prop="targetTitle" width="180"></el-table-column>
   <el-table-column label="指标计算方法" prop="computingMethod"></el-table-column>
   <el-table-column label="分子/分母(自动计算)" width="300">
     <template scope="scope">
       <div class="input-div">
         <input @input="changeMolecule(topicList,scope.$index,scope.row)" class="inputs" type="text"
                v-model="scope.row.molecule">
         <span class="divide">/</span>
         <input @input="changeDenominator(topicList,scope.$index,scope.row)" class="inputs" type="text"
                v-model="scope.row.denominator">
         <span class="divide"
               v-if="scope.row.molecule&&!isNaN(Number(scope.row.molecule))&& scope.row.denominator&&!isNaN(Number(scope.row.denominator))">
           {{(scope.row.molecule/scope.row.denominator*100).toFixed(2)+'%'}}
         </span>
       </div>
     </template>
   </el-table-column>
 </el-table>
changeMolecule(data, index, row) {
	//两种都可以
  	this.$set(data, index, row)
    //this.$set(this.topicList,index,row)
},

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue3中实现拖拽和缩放自定义看板 vue-grid-layout的方法

    Vue3中实现拖拽和缩放自定义看板 vue-grid-layout的方法

    这篇文章主要介绍了Vue3中实现拖拽和缩放自定义看板 vue-grid-layout的方法,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定

    Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定

    表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值。感兴趣的朋友跟随小编一起看看吧
    2019-04-04
  • vue多层嵌套路由实例分析

    vue多层嵌套路由实例分析

    这篇文章主要介绍了vue多层嵌套路由,结合实例形式分析了vue.js多层嵌套路由的概念、原理及相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • npm ERR! code 128的错误问题解决方法

    npm ERR! code 128的错误问题解决方法

    这篇文章主要介绍了解决npm ERR! code 128的错误问题,本文给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-02-02
  • vue项目常用组件和框架结构介绍

    vue项目常用组件和框架结构介绍

    这篇文章通过图文形式给大家介绍了vue项目的骨架及常用组件的相关知识,对此有兴趣的朋友跟着小编一起学习参考下吧。
    2017-12-12
  • vue封装form表单组件拒绝重复写form表单

    vue封装form表单组件拒绝重复写form表单

    这篇文章主要为大家介绍了vue封装form表单组件拒绝重复写form表单的实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 搭建vscode+vue环境的详细教程

    搭建vscode+vue环境的详细教程

    这篇文章主要介绍了搭建vscode+vue环境的详细教程,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • 浅谈Vue插槽实现原理

    浅谈Vue插槽实现原理

    vue.js的灵魂是组件,而组件的灵魂是插槽。借助于插槽,我们能最大程度上实现组件复用。本文主要是对插槽的实现机制进行详细概括总结,在某些场景中,有一定的用处
    2021-06-06
  • vue input输入框关键字筛选检索列表数据展示

    vue input输入框关键字筛选检索列表数据展示

    这篇文章主要为大家详细介绍了vue input输入框关键字筛选检索列表数据展示,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • Vue.js点击切换按钮改变内容的实例讲解

    Vue.js点击切换按钮改变内容的实例讲解

    今天小编就为大家分享一篇Vue.js点击切换按钮改变内容的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论