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


  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" 
    changeMolecule(event, row) {
  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) {


  • 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"
             <span class="divide">/</span>
             <input @input="changeDenominator(topicList,scope.$index,scope.row)" class="inputs" type="text"
             <span class="divide"
                   v-if="scope.row.molecule&&!isNaN(Number(scope.row.molecule))&& scope.row.denominator&&!isNaN(Number(scope.row.denominator))">
    changeMolecule(data, index, row) {
    	// Either way 
      	this.$set(data, index, row)

 Insert picture description here

copyright notice
author[Code の Porter],Please bring the original link to reprint, thank you.

Random recommended