Iview表格点击下一页获取复选框的值以及复选框选中后的回显

 <Table
            :columns="columns"
            :data="list"
            ref="purchaseTable"
            @on-selection-change="selectTable"
            @on-select-cancel="selectCancel"
          />

添加两个事件 参考iview官方文档https://www.iviewui.com/components/table

 selectTable(arr) {
      arr.forEach((item) => {
        if (!this.selectEmploy.includes(item.id)) {
          this.selectEmploy.push(item.id);
        }      
      });
    },

维护一个数组 selectEmpoyee 用于存放checked选中后的表格数据 确保id的唯一性

selectCancel(selection, row) {
      this.selectEmploy = this.selectEmploy.filter((item) => {
        return item != row.id;
      });
    },

多选情况下点击取消时会触发该方法 接受两个参数 第一个为选中项 第二个为取消项
将取消项的id移除即可 方法有很多

回显

async pageChange(val) {
      let result = await saffAPI.queryEmpPositionPage({
        currPage: val,
        pageSize: 20,
        model: {
          ...this.form,
          companyType: this.companyType,
          companyId: this.companyId,
          roleId: this.id,
          excludeRole: this.type == "add",
          orgIds: this.selectdArr,
        },
      });
      //回显
      this.selectEmploy.forEach(item=>{
        result.records.forEach(element=>{
          if(element.id==item){
            this.$set(element,'_checked',true)
          }
        })
      })
      this.list = result.records;
      this.queryPage.total = result.total;
    },

触发翻页按钮时 判断请求到的数据的id值 是否在维护的selectEmpoyee数组里面 iview提供了_checked的属性 设置true即为选中