使用el-table实现分页选择

该博客介绍的功能适用于什么场景？

  当使用Table做数据展示，并需要多选时，如果数据都在同一页，可以直接使用官方文档里的demo就可以轻松实现。但如果对数据做了分页展示处理，如何实现在多个页面间选择呢？这里主要记录我的实现方式。
  我是基于element做的，若是基于iviewui做，思路也相通。element中对于多选Table的demo如下：element多选Table，这里不再对demo代码进行解释。

思路介绍

  该问题的难点在于JS部分，当用户进行勾选后，都会触发selection-change事件，其参数为当前被勾选数据集合。

  需要考虑的问题点大致有：

• 1.由于翻页、查询等操作，数据被刷新后，勾选状态会消失，需要防止重复选择
• 2.翻页后进行勾选，之前页面已勾选的数据不会存在与selection-change的参数中，得想办法保留
• 3.取消勾选时，selection-change的参数不会暂时取消了什么，只会展示已勾选数据，得想办法判断哪些数据被取消了。

  对于这些问题，我的解决思路是：

• 1.定义两个变量：
  • 1.1“当前选择”集合，用来记录当前查询结果的勾选
  • 1.2.“所有选择”集合，用来记录所有页面的勾选结果
• 2.每次查询结束后，对本次查询结果中已被勾选的数据进行默认勾选，并将勾选数据放入“当前选择”集合
• 3.用户操作勾选时，@selection-change的结果与“当前选择”进行比较，来决定如何操作“所有选择”集合

  进一步的实现思路，我以注释形式写在了下文的代码中。

HTML部分

  在element的Table中，每一列是直接使用定义的。代码如下：（在iview中是在js中定义）

<template>
	 
      <Form inline @submit.native.prevent>
        <FormItem label="姓名" :label-width="60">
          <Input type="text" v-model="userQueryData.userName" style="width:200px">Input>
        FormItem>
        <FormItem>
          <Button type="primary" @click="doUserQuery" html-type="submit">查询Button>
        FormItem>
      Form>
      
      <el-table :data="userlist" ref="multipleTable"