Vue-ElementUI实现前端多选框切换分页选择保留之前选的数据，分页选择、回显功能

前端页面开发经常会遇到切换分页时，之前页面选的数据不会保存以及选择的数据如何回显的问题。
然后之前写的方法还有个bug：新增数据时，选择多个分页的数据保存后，进入编辑页。如果直接保存的话只会提交首页选择的数据；如果是分页一页一页点击过去，最后保存的话就会提交全部页面的数据。
后面排查出问题主要是之前使用@selection-change="handleSelectionChange"搞的鬼，所以我想到的解决方案之一是去掉此方法。在selectOne和selectAll方法中去处理handleSelectionChange的逻辑

	// 多选框选中数据
    handleSelectionChange(selection) {
      let selectIds = []
      selection.forEach((item) => {
        selectIds.push(item.id);
      });
      this.selectIdList = selectIds;
    }

【实现方案】
el-table标签中使用以下属性：
@select、@select-all、:row-key
el-table-column标签中使用属性：
:reserve-selection

<el-table v-loading="loading" ref="tableRef" :data="infoList" @select="selectOne" @select-all="selectAll" :row-key="getRowKeys">
  <el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
  <el-table-column label="ID" align="center" prop="id" />
  <el-table-column label="名称" align="center" prop="account" />
</el-table>
<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
  @pagination="getInfoList" />

data() {
  return {
	// 页面加载
    loading: false,
    // 列表总数
    total: 0,
    // 列表数据
    infoList: [],
    // 回显id列表
    idList: [],
    // 选中id列表
    selects: [],
    // 查询参数
    queryParams: {
      pageNum: 1,
      pageSize: 10
    },
    // 选中id列表(新增或编辑要保存的id列表)
    selectIdList: [], 
}
methods: {
  // 获取原已选列表的数据
  getInfo(…).then((response) => {
    this.selects= response.data.rows;
  }
  // 加载列表方法-采用同步：先获取分页列表数据再做回显选择
  async getInfoList() {
    this.loading = true;
    await listInfo(this.queryParams).then(response => {
    this.total = response.total;
    this.infoList = response.rows;
    if (this.idList.length > 0) {
      // 多选框回显
      this.$nextTick(() => {
        for (let i = 0; i < this.idList.length; i++) {
          var list = this.infoList.filter(item=>item.id==this.idList[i]);
          var row = list[0];
          if (row) {
            this.$refs.tableRef.toggleRowSelection(row, true);
          }
        }
      });
    }
    this.loading = false;
    });
  },
  // 判断单选或取消
  selectOne(rows, row) {
    let selected = rows.length && rows.indexOf(row) !== -1
    if (selected) { // 单选
      this.selects.push(row);
    } else { // 取消单选
      for(var i=0; i<this.idList.length; i++){
        if(this.idList[i].id === row.id){
          this.idList.splice(i,1);
        }
      }
      for(var i=0; i<this.selects.length; i++){
        if(this.selects[i].id === row.id){
          this.selects.splice(i,1);
        }
      }
    }
  },
  // 判断全选或取消
  selectAll(rows, row) {
    if (rows.length > 0) { // 全选
      for(var i=0; i<rows.length; i++) {
      	// 未添加的才插入，否则数据会冗余
        if (!this.selects.some(s=>s.id===rows[i].id)) {
          this.selects.push(rows[i]);
        }
      }
    } else { // 取消全选
      for(var i=0; i<this.infoList.length; i++) {
        for(var j=0; j<this.idList.length; j++){
          // 移除当前页infoList的数据
          if(this.idList[j].id === this.infoList[i].id){
            this.idList.splice(j,1);
          }
        }
        for(var k=0; k<this.selects.length; k++){
          // 移除当前页infoList的数据
          if(this.selects[k].id === this.infoList[i].id){
            this.selects.splice(k,1);
          }
        }
      }
    }
  },
  // 多选框回显
  getRowKeys(row) {
    if (row.id) return row.id;
  },
}