element-UI el-table修改input值视图不更新问题
作者：代码の搬运工
这篇文章主要介绍了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)
},
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。