element表格实现分页多选功能

用过element的table的都知道，多选的时候，在切换分页的过程中上一页勾选的数据会消失。想要实现表格分页多选的话。

在el-table组件最外层中添加 :row-key="getRowKeys",在加上@selection-change="handleChange"用于触发表格的勾选事件

<el-table
   ref="form"
   :model="form"
   :row-key="getRowKeys"
   @selection-change="handleSelectChange"
   ref="table"
>
</el-table>

在设置多选框的那一列添加 reserve-selection="true"

<el-table-column type="selection" :reserve-selection="true"></el-table-column>

最后在methods方法中添加

methods:{
  getRowKeys(row) {
    // 设置勾选返回的值，可自定义
    return row.id
  },
  handleSelectChange(selection) {
    console.log(selection)
    this.ids = selection.map((item) => item.id);
  }
}

以上就实现了表格分页多选的功能，完成后如果需要清空选中,否则在下一个批量操作中还会记录上一次选中的数据。可以使用以下方法清除，注意给表格绑定上ref

this.$refs.table.clearSelection();