Vue中強制表格數據重新渲染

Vue中強制表格數據重新渲染

<el-table
:data="tableData.slice((this.pagenum-1)*this.pagesize,this.pagenum*this.pagesize)"
style="width: 100%"
border
:key="keyvalue">
  <el-table-column label="Confirm" width="180" align="center">
     <template slot-scope="scope">
       <el-checkbox checked v-if="scope.row.Confirm_flag=='Y'" @change="UpdateConfirmeState($event,scope.row.Id)"></el-checkbox>
         <el-checkbox v-else @change="UpdateConfirmeState($event,scope.row.Id)"></el-checkbox>
     </template>
  </el-table-column>
 </el-table>
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="pagenum"
  :page-sizes="[5, 10]"
  :page-size="pagesize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total">
</el-pagination>

通過v-if來判斷checkbox是否被選中：
v-if的生命周期：
v-if
初始渲染
初始值為 false 組件不會渲染，生命周期鈎子不會執行，v-if 的渲染是惰性的。
初始值為 true 時，組件會進行渲染，並依次執行 beforeCreate,created,beforeMount,mounted 鈎子。

切換
false => true
依次執行 beforeCreate,created,beforeMount,mounted 鈎子。
true => false
依次執行 beforeDestroy,destroyed 鈎子。

所以pagination進行到下一頁的時候，checkbox狀態不會更換，還是第一頁的狀態，所以需要通過vue key 實現重新渲染（還可以通過watch改變v-if條件的狀態來強制重新渲染）

在table上加個key值，當點擊@size-change或者@current-change的事件時改變key值就可觸發重新渲染