How does the vue element-UI table table force re-rendering of data?

1. Click the View hide current button and this content to show that another content can.

2. At first, manual display:none, found that after turning the page, the effect of the current cell none on the next page was still there.
3. So I tried to

<el-table-column label="rfid" align="center" v-if="value222">
  <template slot-scope="scope">
    <span v-if="!scope.row.ifShow">
      <span :id="scope.row.rfid">{{ scope.row.rfid|rfid}}</span>
      <el-button type="text" @click="showrfid($event,scope.row)"></el-button>
    </span>
    <span v-else>{{scope.row.rfid}}</span>
  </template>
</el-table-column>

add an ifShow attribute to the scope.row when clicked, which is added, but the table will not be re-rendered because of this.
seems to re-render only based on the data el-table: data= "rfidInfo" .


the click event is solved through $set. Specific code:

showrfid(event,row){
  this.rfidInfo[row.$index].ifShow=true;
  this.$set(this.rfidInfo,row.$index,this.rfidInfo[row.$index]);
},

by the way, thank you for your kind answer upstairs.


paste the code, it doesn't exist in theory.

https://jsfiddle.net/y4caezym/

Menu