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)
},

总结

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

相关文章

  • el autocomplete支持分页上拉加载使用详解

    el autocomplete支持分页上拉加载使用详解

    这篇文章主要为大家介绍了el autocomplete支持分页上拉加载使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • Element-UI Table组件上添加列拖拽效果实现方法

    Element-UI Table组件上添加列拖拽效果实现方法

    这篇文章主要为大家详细介绍了Element-UI Table组件上添加列拖拽效果的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-04-04
  • 如何抽象一个Vue公共组件

    如何抽象一个Vue公共组件

    这篇文章主要介绍了如何抽象一个Vue公共组件,以一个数字键盘组件为例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • vue中echarts@4.9版本,地图的使用方式

    vue中echarts@4.9版本,地图的使用方式

    这篇文章主要介绍了vue中echarts@4.9版本地图的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • ElementUI+命名视图实现复杂顶部和左侧导航栏

    ElementUI+命名视图实现复杂顶部和左侧导航栏

    本文主要介绍了ElementUI+命名视图实现复杂顶部和左侧导航栏,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • VueJs 将接口用webpack代理到本地的方法

    VueJs 将接口用webpack代理到本地的方法

    本篇文章主要介绍了VueJs 将接口用webpack代理到本地的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 在JS中如何同步修改vue中的变量

    在JS中如何同步修改vue中的变量

    这篇文章主要介绍了在JS中如何同步修改vue中的变量问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 关于vuepress部署出现样式的问题及解决

    关于vuepress部署出现样式的问题及解决

    这篇文章主要介绍了关于vuepress部署出现样式的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 浅谈vue权限管理实现及流程

    浅谈vue权限管理实现及流程

    这篇文章主要介绍了浅谈vue权限管理实现及流程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • 解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目

    解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目

    这篇文章主要介绍了解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目.文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02

最新评论