element-ui的表格有多选框时翻页记住之前选择的数据

场景描述：
element-ui的table表格数据有提供多选框的功能,只要在表格列中多加一列就可以选择表格的数据。但是有时候表格的数据是有分页的,分页一般是要重新请求后台数据,这样上一页的数据的选中状态就没有了。
解决办法：
element-ui提供了reserve-selection，它仅对 type=selection 的列有效，类型为 Boolean，为 true时会在数据更新之后记住之前选择的数据。（需要指定row-key）
代码如下：

<el-table
    :data="tableData"
    :row-key="getRowKey"
    ref="dataTable"
    @selection-change="handleSelectionChange"
    border>
    <el-table-column
      type="selection"
      :reserve-selection="true">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="手机号">
    </el-table-column>
</el-table>

methods: {
    // 指定一个key标识这一行的数据
    getRowKey (row) {
      return row.id
    },

    // val表示选中的表格行数据
    handleSelectionChange (val) {
      console.log(val)
    },
}