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