翻页复选框处理

    //复选框事件(保留翻页选中的数据)
    selectChangeEvent({ checked, records, reserves, row }) {
      //勾选选中时
      if (checked) {
        //第一次选数据，还未进行翻页时
        if (reserves.length == 0){
          this.selectedRowKeys = records.map(v => v.id);
          this.selectionRows = records;
        }else {
          //id集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectedRowKeys = [...reserves.map(v => v.id),...records.map(v => v.id)];
          //数据集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectionRows = [...reserves,...records];
        }
      }else {
        //取消选中时
        let idIndex = this.selectedRowKeys.indexOf(row.id);
        if (idIndex > -1) {
          //删除取消选中删除指定元素id
          this.$delete(this.selectedRowKeys, idIndex);
        }
        let dataIndex = null;
        for(let i = 0; i < this.selectionRows.length; i++) {
          if (this.selectionRows[i].id == row.id) {
            dataIndex = i;
            break;
          }
        }
        //删除取消选中的元素整个对象
        this.$delete(this.selectionRows, dataIndex);
      }
    },
    //vxe复选框当前页全选中方法(保留翻页选中的数据)：
    selectAllEvent({ checked, records, reserves}) {
      //全选中时
      if (checked) {
        //第一次选数据，还未进行翻页时
        if (reserves.length == 0){
          this.selectedRowKeys = records.map(v => v.id);
          this.selectionRows = records;
        }else {
          //id集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectedRowKeys = [...reserves.map(v => v.id),...records.map(v => v.id)];
          //数据集合，翻页存在已选中的数据时,拼接新选中的数据
          this.selectionRows = [...reserves,...records];
        }
      }else {
        //取消全选时,直接将翻页数据赋值，当前页数据不用加上
        this.selectionRows = reserves;
        this.selectedRowKeys = reserves.map(v => v.id)
      }
    },

 

:checkbox-config="{highlight: true, trigger: 'row', reserve: true, range: true}"

@checkbox-all="selectAllEvent"
@checkbox-change="selectChangeEvent"

参考来源网络