iview框架table 跨页多选实现

由于iview的table并没有自带的分页功能，只能由Page组件实现分页。实现思想是每次分页就给table的data重新填充数据。

但是做多选的时候，分页就会出现bug，选中之后跳转到其他页，再跳转回来，就发现以前选中的行，选中效果不见了。

找了很多方法，要么版本太老，要么无用。最终结合找到的资料加自己的一些想法，实现了跨页多选。以下是代码：
 

html代码

<Modal
      v-model="receiveUserList"
      title="选择接收用户"
      footer-hide
      width="650"
      :height="450"
      style="top: 20px;"
    >
      <ul class="shift_box">
        <li class="float_left">
          <span class="to_time">关键字：</span>
          <Input v-model="kword" placeholder="姓名或手机号" clearable style="width: 200px" />
        </li>
        <li class="float_left">
          <Button
            type="primary"
            class="to_time"
            @click="searchUserBtn"
            :loading="searchUserLoading"
          >查询</Button>
          <Button @click="handleClose()" style="margin-left: 8px">确定</Button>
        </li>
      </ul>
      <Table
        ref="selectionTable"
        :columns="columns"
        :data="data"
        :loading="loading"
        size="default"
        @on-select="handleSelectOne"
        @on-select-all="handleSelectAll"
        @on-select-cancel="handleSelectOneCancel"
        @on-select-all-cancel="handleSelectAllCancel"
      ></Table>
      <Page
        :total="total"
        @on-change="changeUserPage"
        show-elevator
        :page-size="10"
        :current="Number(page)"
        show-total
        class-name="my_footer_page"
      ></Page>
    </Modal>

js代码

//点击选择用户
    handleSelectUser() {
      var _this = this;
      this.receiveUserList = true;
      this.getReciveUserList();
    },
//清空选择的用户
    handleClearUser() {
      this.formValidate.user_ids = [];
      this.formValidate.user_names = [];
      this.formValidate.send_user = "";
    },
    //选择一个用户时
    handleSelectOne(selection, row) {
      this.setHandleSelect(selection);
    },
    //取消一个选择的时候
    handleSelectOneCancel(selection, row) {
      var user_ids_i = this.formValidate.user_ids.indexOf(row.user_id);
      var user_names_i = this.formValidate.user_names.indexOf(row.user_name);
      this.formValidate.user_ids.splice(user_ids_i, 1);
      this.formValidate.user_names.splice(user_names_i, 1);
    },
    //全选当前页
    handleSelectAll(selection) {
      this.setHandleSelect(selection);
      this.selection = selection;
    },
    //取消全选
    handleSelectAllCancel(selection) {
      var len = this.selection.length;
      if (len > 0) {
        for (var i = 0; i < len; i++) {
          var user_ids_i = this.formValidate.user_ids.indexOf(
            this.selection[i].user_id
          );
          var user_names_i = this.formValidate.user_names.indexOf(
            this.selection[i].user_name
          );
          console.log(this.selection[i].user_id);
          this.formValidate.user_ids.splice(user_ids_i, 1);
          this.formValidate.user_names.splice(user_names_i, 1);
        }
      }
      this.selection = [];
    },
//设置select
    setHandleSelect(selection) {
      var len = selection.length;
      for (var i = 0; i < len; i++) {
        if (
          selection[i]["user_id"] &&
          selection[i]["user_id"] != "" &&
          selection[i]["user_id"] != null
        ) {
          if (this.formValidate.user_ids.indexOf(selection[i]["user_id"]) < 0) {
            this.formValidate.user_ids.push(selection[i]["user_id"]);
          }
        }
        if (
          selection[i]["user_name"] &&
          selection[i]["user_name"] != "" &&
          selection[i]["user_name"] != null
        ) {
          if (
            this.formValidate.user_names.indexOf(selection[i]["user_name"]) < 0
          ) {
            this.formValidate.user_names.push(selection[i]["user_name"]);
          }
        }
      }
    },
//关闭弹框（确定）
    handleClose() {
      let _this = this;
      this.receiveUserList = false;
      var len = this.formValidate.user_names.length;
      var send_user = "";
      if (len > 0) {
        for (var i = 0; i < len; i++) {
          send_user += this.formValidate.user_names[i] + ",";
        }
      }
      this.formValidate.send_user = send_user;
    },
changeUserPage(page) {
      let queryObj = Object.assign({}, this.$route.query);
      queryObj.p = page;
      this.page = page;
      this.$router.replace({
        path: this.$route.path,
        query: queryObj
      });
      this.getReciveUserList();
    },
    //接收用户列表
    getReciveUserList() {
      var _this = this;
      this.loading1 = true;
      this.$axios
        .post(
          "/admin/notice/select_user_list",
          qs.stringify({
            page: this.page || 1,
            kword: this.kword || ""
          })
        )
        .then(res => {
          let msg = res.data;
          this.page = Number(msg.page);
          this.loading = false;
          this.searchUserLoading = false;
          if (!msg.errcode) {
            this.data = msg.data;
            this.total = Number(msg.total) || 0;
          } else {
            this.$Message.error(msg.errmsg);
          }
//做跨页多选，由于渲染时间的原因，使用setTimeout规避
          setTimeout(function() {
            //拿到当前table的所有行的引用，里面包含_isChecked属性
            var objData = _this.$refs.selectionTable.$refs.tbody.objData;
            for (let key in objData) {
//分页判断已选数组里是否存在
              var ndx = _this.formValidate.user_ids.findIndex(function(ele) {
                return ele == objData[key].user_id;
              });
              if (ndx > -1) {
                objData[key]._isChecked = true;
              }
            }
          }, 500);
        })
        .catch(e => {
          this.loading = false;
          this.searchUserLoading = false;
        });
    },