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的方法,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-03-03
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值。感兴趣的朋友跟随小编一起看看吧2019-04-04


最新评论