elementUI实现el-table分页多选功能，解决点击分页之后还可以选中

<template>
  <div>
    <el-dialog
      title="批量下载推广码"
      :visible.sync="dialogVisibleDownCodeAll"
      width="900px"
      :before-close="close"
    >
      <div class="container">
        <el-form size="small">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item>
                <el-input
                  v-model="userFrom.keyword"
                  @keyup.enter.native="onChanges"
                  placeholder="请输入姓名、电话、UID"
                  class="selWidth"
                  size="small"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    class="el-button-solt"
                    size="small"
                    @click="onChanges"
                  />
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template>
        <el-checkbox
          v-model="allcheckUser"
          label="全选"
          border
          style="margin-bottom: 20px;"
        ></el-checkbox>
        <el-table
          :key="tableKey1"
          :data="userData.data"
          :selection="userSelection"
          row-key="uid"
          @selection-change="handleSelectionChangeUser"
          style="width: 100%"
          size="mini"
          class="table"
          highlight-current-row
          ref="table1"
          v-loading="loading"
          :element-loading-text="`正在下载中:`+percentage + '%'"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="ID" min-width="120" prop="uid" />
          <el-table-column label="用户姓名" min-width="120" prop="real_name" />
          <el-table-column label="用户昵称" min-width="120" prop="nickname" />
          <el-table-column label="用户电话" min-width="120" prop="phone" />
        </el-table>
        <div class="block">
          <el-pagination
            :page-sizes="[10, 20]"
            :page-size="userFrom.limit"
            :current-page="userFrom.page"
            layout="total, sizes, prev, pager, next, jumper"
            :total="userData.total"
            @size-change="handleSizeChangeUser"
            @current-change="pageChangeUser"
          />
        </div>
      </template>
      <span v-if="!loading" slot="footer" class="dialog-footer">
        <el-button type="primary" style="margin-top: 12px;" @click="next"
          >下 载</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

import { getToken } from "@/utils/auth";

import {
  promoterListApi
} from "@/api/promoter";

export default {
  name: "DownCode",
  props: {},
  data() {
    return {
      newAllArray: [],
      newAllArrayCheck: [],
      myHeaders: { "X-Token": getToken() },
      tableKey1: 0,
      allcheckUser: false,
      dialogVisibleDownCodeAll: false,
      selection: [],
      userSelection: [],
      userData: {
        data: [],
        total: 0
      },
      userFrom: {
        page: 1,
        limit: 10,
        keyword: ""
      },
      page: 2,
      percentage: 0,
      loading: false
    };
  },
  watch: {},
  methods: {
    next() {
      const newArray = [].concat(...Object.values(this.newAllArray));
      newArray.filter(item => item !== undefined);
      if (newArray.length == 0 && !this.allcheckUser) {
        this.$message.error("请先选择分销员");
        return;
      }
      this.down(1);
    },
    down(page) {
      this.loading = true;
      const newArray = [].concat(...Object.values(this.newAllArray));
      newArray.filter(item => item !== undefined);
      var uid_Array = newArray.map(function(obj) {
        return obj.uid;
      });
      axios({
        url:
          process.env.VUE_APP_BASE_API +
          "/mer/user/promoter/code/batch_download",
        method: "POST",
        data: {
          uid: this.allcheckUser ? "-1" : uid_Array.join(","),
          page: page
        },
        responseType: "json",
        headers: {
          "X-Token": getToken()
        }
      }).then(response => {
        this.percentage = response.data.progress;
        if (response.data.url == "") {
          this.down(this.page++);
        } else if (response.data.status == 400) {
          this.loading = false;
          this.$message.error(response.data.message);
        } else {
          this.loading = false;
          window.open(response.data.url);
        }
      });
    },
    close() {
      this.dialogVisibleDownCodeAll = false;
    },
    open() {
      this.dialogVisibleDownCodeAll = true;
    },
    onChanges() {
      this.getListUser(1);
    },
    // 分销员列表
    getListUser(num) {
      this.userFrom.page = num ? num : this.userFrom.page;
      promoterListApi({ ...this.userFrom })
        .then(res => {
          this.userData.data = res.data.list;
          this.userData.total = res.data.count;

          this.newAllArrayCheck = [...this.newAllArray];
          const newArray = [].concat(...Object.values(this.newAllArrayCheck));
          newArray.filter(item => item !== undefined);

          // 赋值选中的数据
          // 赋值选中缓存的数据
          const selectedRow = newArray;
          this.$nextTick(() => {
            if (selectedRow) {
              const table = this.$refs.table1;
              selectedRow.forEach(row => {
                if (row != undefined) {
                  const selectedRowIndex = this.userData.data.findIndex(
                    item => item["uid"] === row["uid"]
                  );
                  if (selectedRowIndex > -1) {
                    table.toggleRowSelection(
                      this.userData.data[selectedRowIndex],
                      true
                    );
                  }
                }
              });
            }
          });
        })
        .catch(res => {
          this.$message.error(res.message);
        });
    },
    handleSizeChangeUser(val) {
      this.userFrom.limit = val;
      this.getListUser();
    },
    pageChangeUser(page) {
      this.userFrom.page = page;
      this.getListUser();
    },
    handleSelectionChangeUser(val) {
      // 判断选中行数据的变化
      this.userSelection = val;
      if (this.newAllArray[this.userFrom.page] == undefined) {
        this.newAllArray[this.userFrom.page] = [...val];
      } else {
        this.newAllArray[this.userFrom.page] = [...val] || [
          ...this.newAllArray[this.userFrom.page],
          ...val
        ];
      }
    }
  }
};
</script>

<style scoped lang="scss"></style>