current position:Home>Element UI El table modify input value view not updated

Element UI El table modify input value view not updated

2022-04-29 05:49:44Code の Porter

List of articles

problem

  1. input box adopt v-model=“scope.row.molecule” Modify the bound value , The console prints out the correct modified value . But the view is not new
     <input class="inputs" type="text"v-model="scope.row.molecule">
    
  2. By monitoring @input Event go Modify the current line The array data inside , Console printing can also output correctly , The view is updated, but not .
     <input @input="changeMolecule($event,scope.row)" class="inputs" type="text" 
     			 v-model="scope.row.molecule">
    
    changeMolecule(event, row) {
          
    	row.molecule=event.target.value
    },
    
  3. By monitoring @input Event to call this.$set() Changing data , The console print input is also the correct output , The view is still not updated .
    changeMolecule(data, index, row) {
          
      this.topicList.forEach(item=>{
          
        if(item.targetId===row.targetId){
          
          this.$set(item,'molecule',row.molecule)
        }
      })
    },
    

resolvent

  • Or through this.$set(), But you can't directly modify a value in the object , because el-table The monitor is A whole row of data , Not a cell . So we need to Reassign A whole row of data

     <el-table :data="topicList" border height="60vh" style="width: 100%">
       <el-table-column label=" indicators " prop="targetTitle" width="180"></el-table-column>
       <el-table-column label=" Index calculation method " prop="computingMethod"></el-table-column>
       <el-table-column label=" molecular / The denominator ( Automatic calculation )" 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) {
          
    	// Either way 
      	this.$set(data, index, row)
        //this.$set(this.topicList,index,row)
    },
    

 Insert picture description here

copyright notice
author[Code の Porter],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/116/202204261025390357.html

Random recommended