vue+iview table跨页多选遇到的问题

#iview table跨页多选遇到的坑
iview table和page组件组合使用时，跨页多选时，会记不住选过的选项，比如说，在第1页选择了2项，然后点击第2页，再回到第一页时选中的项没有显示出来。
解决方法：
核心就是切换时重新给选中的项勾上，
核心代码：

 // 跨页重新选中
  setChecked() {
  let objData = this.$refs["table"].objData;
  for (let index in objData) {
    if (this.courseIds.has(objData[index].id)) {
      objData[index]._isChecked = true;
    }
  }
},

具体实现：

<Table
      ref="table"
      :columns="columns"
      :data="tableList"
      @on-select="handleSelectRow"
      @on-select-cancel="handleCancelRow"
      @on-select-all="handleSelectAll"
      @on-select-all-cancel="handleSelectAll"
    ></Table>
    <span class="selectSpan">当前已选中数：{{ selectSum }}</span>
    <Page
      :total="pagination.total"
      :page-size="pagination.size"
      :current="pagination.number"
      show-sizer
      show-total
      @on-change="changePage"
      @on-page-size-change="changePageSize"
      :styles="{ float: 'right', marginTop: '10px' }"
    />

 data() {
    return {
      formData: {
        workflowNo: "",
        workflowName: "all",
        dateRange: [],
        processType: "",
        processTypeList: [],
        courseName: ""
      },
      courseIds: new Set(),
      selectSum: 0,
    };
  },
  computed: {
    ...mapGetters({
      userInfo: "auth/userInfo",
      pagination: "studentsSignUp/pagination",
      tableList: "studentsSignUp/list"
    }),
    columns() {
      return [
        {
          type: "selection",
          width: 80,
          tooltip: true,
          align: "center"
        },
        {
          title: "培训班编号",
          key: "courseNo",
          // tooltip: true,
          align: "center",
          minWidth: 230
        },
        {
          title: "培训班名称",
          key: "courseName",
          // tooltip: true,
          align: "center",
          minWidth: 230,
          render: (h, params) => {
            return h(
              "Button",
              {
                on: {
                  click: () => this.btnHandler(params.row)
                },
                props: {
                  type: "text",
                  size: "small"
                }
              },
              params.row.courseName
            );
          }
        },
        {
          title: "班主任",
          key: "implementerName",
          tooltip: true,
          align: "center",
          minWidth: 100
        },
        {
          title: "主办部门（单位）",
          key: "baseOrgName",
          tooltip: true,
          align: "center",
          minWidth: 160
        },
        {
          title: "开班时间",
          tooltip: true,
          key: "startDate",
          align: "center",
          width: 160,
          render: (h, params) => {
            const dateString =
              params.row.startDate != undefined
                ? dayjs(new Date(params.row.startDate)).format("YYYY-MM-DD")
                : "-";
            return h("span", dateString);
          }
        },
        {
          title: "结班时间",
          tooltip: true,
          key: "endDate",
          align: "center",
          width: 160,
          render: (h, params) => {
            const dateString =
              params.row.endDate != undefined
                ? dayjs(new Date(params.row.endDate)).format("YYYY-MM-DD")
                : "-";
            return h("span", dateString);
          }
        }
      ];
    }
  },
  created() {
    this.setPagination({ ...this.pagination, number: 1, size: 10 });
    this.query();
  },
  methods: {
    ...mapActions({
      queryUserinfo: `auth/${REQ_QUERY_USERINFO}`,
      loadCousrePage: `studentsSignUp/${REQ_IMPLEMENT_LOAD_PAGE}` //培训实施培训班分页查询
    }),
    ...mapMutations({
      setPagination: `studentsSignUp/${SET_SINGLE_ACCOUNTING_PAGINATION}`
    }),
    // 查询列表
    async query() {
      await this.queryUserinfo(window.config.SzhxyAppId);
      let params = {
        action: "",
        isEnd: "0",
        courseName: this.formData.courseName,
        startDate:
          this.formData.dateRange[0] == undefined ||
          this.formData.dateRange[0] == ""
            ? ""
            : dayjs(this.formData.dateRange[0]).format("YYYY-MM-DD HH:mm:ss"),
        endDate:
          this.formData.dateRange[1] == undefined ||
          this.formData.dateRange[0] == ""
            ? ""
            : dayjs(this.formData.dateRange[1]).format("YYYY-MM-DD HH:mm:ss"),
        types: this.types,
        implementerDeptId: this.userInfo.deptId,
        pagination: this.pagination
      };
      this.loadCousrePage(params).then(res => {
        if (res.responseHeader.status == 1) {
          this.$nextTick(() => {
            this.setChecked();
          });
        } 
      });
    },
    //查询
    search() {
      this.setPagination({ ...this.pagination, number: 1 });
      this.query();
    },
    //  切页
    changePage(page) {
      this.setPagination({ ...this.pagination, number: page });
      this.query();
    },
    //改变页大小
    changePageSize(size) {
      this.setPagination({ ...this.pagination, size, number: 1 });
      this.query();
    },
    //  选中某一行
    handleSelectRow(selection, row) {
      this.courseIds.add(row.id);
      this.selectSum = this.courseIds.size;
    },
    //  取消某一行
    handleCancelRow(selection, row) {
      this.courseIds.delete(row.id);
      this.selectSum = this.courseIds.size;
    },
    // 全选/取消全选
    handleSelectAll(selection) {
      //当前页取消全选
      if (selection.length == 0) {
        var data = this.$refs["table"].data;
        data.forEach(item => {
          if (this.courseIds.has(item.id)) {
            this.courseIds.delete(item.id);
          }
        });
      } else {
        //当前页全选
        this.selectList = selection;
        this.selectList.forEach(value => {
          this.courseIds.add(value.id);
        });
      }
      //当前选中数
      this.selectSum = this.courseIds.size;
    },
    // 跨页重新选中
    setChecked() {
      let objData = this.$refs["table"].objData;  //拿到当前table的值
      for (let index in objData) {
        if (this.courseIds.has(objData[index].id)) {
          objData[index]._isChecked = true;  //重新勾选
        }
      }
    },
    courseHandler() {
      let selectedCoureseIds = [...this.courseIds]; //将选中的班级编号转换为数组
      if (selectedCoureseIds == false) {
        this.$Message.error("请至少选择一个培训班!");
        return;
      }
      let  query = {
          courseId: JSON.stringify(selectedCoureseIds),
          isString: true,
          type: "shiShi"
        };
      this.$router.push({
        path: "/admin/teacherFee",
        query
      });
      } 
  }
};```
参考：
[https://blog.csdn.net/qq_19343775/article/details/90031761](https://blog.csdn.net/qq_19343775/article/details/90031761)