element-UI el-table修改input值視圖不更新問(wèn)題

更新時(shí)間：2024年02月29日 09:20:47 作者：代碼の搬運(yùn)工

這篇文章主要介紹了element-UI el-table修改input值視圖不更新問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

問(wèn)題

1.input框通過(guò)v-model=“scope.row.molecule”

綁定的值去修改，控制臺(tái)打印輸出的是正確修改的值。

但是視圖不跟新

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

2.通過(guò)監(jiān)聽(tīng)@input事件去修改當(dāng)前行里面的數(shù)組數(shù)據(jù)

控制臺(tái)打印也是能正確輸出

但視圖還是不更新

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

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

3.通過(guò)監(jiān)聽(tīng)@input事件去調(diào)用this.$set()改變數(shù)據(jù)

控制臺(tái)打印輸入也是正確輸出

視圖還是不更新

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

解決方法

還是通過(guò)this.$set()，但是不能直接去修改對(duì)象里的某一個(gè)值

因?yàn)閑l-table監(jiān)聽(tīng)的是一整行數(shù)據(jù)，并不是某一個(gè)單元格

所以需要重新賦值一整行數(shù)據(jù)

 <el-table :data="topicList" border height="60vh" style="width: 100%">
   <el-table-column label="指標(biāo)" prop="targetTitle" width="180"></el-table-column>
   <el-table-column label="指標(biāo)計(jì)算方法" prop="computingMethod"></el-table-column>
   <el-table-column label="分子/分母（自動(dòng)計(jì)算）" 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)
},