vue + element-ui Table 多页选择数据并记录保存选中的数据

需求： 开发中我们常常会用到表格的复选框功能，在表格进行翻页或者切换条数时，希望还能记住之前的勾选项。

问题：当我选了第一页的一条数据时，点到第二页，数据就刷新了，第一页选的选项也就没有保存了，所以就只能永远选择一页内的数据。

<el-table
	ref="multipleTable1"
	:data="tableData4"
	tooltip-effect="dark"
	style="width: 100%;cursor: pointer;"
	:row-key="getRowKeys"
	@selection-change="handleSelectionChange"
	@row-click="clickRow1">
		<el-table-column
			type="selection"
			width="55"
			:reserve-selection="true">
		</el-table-column>
</el-table>
        
<div style="display: inline-flex;flex-direction: row;justify-content: flex-end;width: 100%;">
	<el-pagination
		@size-change="handleSizeChangeTask"
		@current-change="handleCurrentChangeTask"
		:current-page="pageTask"
		:page-sizes="[5, 10, 15, 20]"
		:page-size="pageSizeTask"
		layout="total, sizes, prev, pager, next, jumper"
		:total=totalTask>
	</el-pagination>
  </div>
            
<script>
  export default {
    data() {
      return {
        multipleSelection: []
      }
    },

    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>

解决方案：

用 element-ui table 里这个参数：
（1）reserve-selection -->仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）

（2）配合row-key -->行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的。
         将row-key设置为表格中唯一的字段名称。这样就实现了后端分页在翻页或切换条数时，记住之前的复选框选项。
         row-key类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。

data(){
    return{
        // 获取row的key值
        getRowKeys(row) {
            return row.id;
        },
    }
}

注：此方式存在点击表头复选框不是全选所有数据而是选择当前页所有数据的问题