vue element-UI table 表格如何强制重新渲染数据?

1.点击查看隐藏当前按钮和这个内容,显示另一个内容能。
图片描述
2.刚开始是手动display:none,发现翻页后,下一页当前单元格none的效果竟然依然在。
3.于是我试图

<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>

点击的时候给scope.row添加个ifShow属性,添加是添加上了,但是表格并不会因为这个重新渲染。
似乎只会根据 el-table :data="rfidInfo" 这个data重新渲染。

回答:

把代码贴一下,理论上是不存在的。

https://jsfiddle.net/y4caezym/

回答:

点击事件里通过$set解决了。具体代码:

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

顺便,感谢楼上的热心回答。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注