vue中el-table实现批量删除选中后点击下一页，上一页选中操作丢失

一、开发背景及其选中操作丢失的原因？

        vue+element ui开发一个table，这个表格要有分页、批量删除等功能，table的分页调用后端接口实现分页，在点击下一页调接口接口获取数据导致了DOM的重新渲染，所以导致在上一页做的选中操作没了！

复现问题：

1、点击CheckBox选中数据！

2、点击下一页或者点击上一页是选中数据的操作丢失了！ 

二、代码实现table的批量删除？

实现批量删除切换页面选中操作不丢失的关键是：

@selection-change="selectionChange"
//当选择项发生变化时会触发该事件
:row-key="getRowKeys"
//行数据的 Key,能够拿到对应的选中的id并且返回出去
:reserve-selection="true"
//仅对table列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）

对应的方法：

selections:[]
//在export default里的data里声明一个变量
selectionChange: function (selections) {
      this.selections = selections.map(row => row.id)
      //将选中的数据存放在一个数组中
},
getRowKeys(row) {
      return row.id;
      //将id return出去
},

 对应的位置：

结果展示：

第一页选中操作：

第二页也选中： 

 

回到第一页选中操作并未丢失： 

 

 

 1、下面附上完整的案例template的代码。

  2、script的逻辑代码。

  这样你再遇到后端分页，做批量删除的时候只需要把我们声明的selections传给后端就没有问题了！