data vue 全部重新渲染_Vue中强制表格数据重新渲染

Vue中强制表格数据重新渲染

:data="tableData.slice((this.pagenum-1)*this.pagesize,this.pagenum*this.pagesize)"

style="width: 100%"

border

:key="keyvalue">

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

通过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值就可触发重新渲染