分页和多选问题 解决方案

**element-ui **解决方案

<el-table
  ref="multipleTable"
  :data="tableData"
  :row-key="getRowKeys"
  @row-click="handleRowClick"
  @select="handleSelectionChange"
  @select-all="handleSelectAll"
>
    // 注意 row-key 唯一值
  <el-table-column type="selection" width="80" align="center" :reserve-selection="true">
       // 注意
   </el-table-column>
    
  <el-table-column
    v-for="item in columns"
    :key="item.prop"
    :label="item.label"
    :prop="item.prop"
    align="center"
  ></el-table-column>
</el-table>

initValue: [], // 弹窗外面的 列表的 数据  props

tableData: [],  // 表格数据 （弹窗）
selectedRowsOld: [],    // 原来数据
selectedRows: [],    // 最终勾选的数据

this.selectedRows = JSON.parse(JSON.stringify(this.initValue));
this.selectedRowsOld = JSON.parse(JSON.stringify(this.initValue));

getList() {
  if (typeof this.request == 'function') {
    this.loading = true;
    this.request(this.queryParam).then(res => {
      this.loading = false;
      if (res.code === 200) {
        this.tableData = res.data.rows;
        this.pageTotal = res.data.total;
          // 注意
        this.selectedRowsOld.forEach(rowSon => {
          if (
            res.data.rows.find(item => {
              return rowSon.productCode == item.productCode;
            })
          ) {
            this.$refs.multipleTable.toggleRowSelection(
              res.data.rows.find(item => {
                return rowSon.productCode == item.productCode;
              }),
              true
            );
          }
        });
      } else {
        this.$message.error(res.message);
      }
    });
  }
},


// 表格多选
handleSelectionChange(selection, row) {
  const clickRow = row.productCode; // 选中的或者 取消选中的
  const oldSelectionIndex = this.selectedRowsOld.findIndex(item => item.productCode == clickRow);
  // 如果 点击的 在原来的 数组中(取消选中) 则删除
  // 否则 加入 原来的数组中
  if (oldSelectionIndex > -1) {
    this.selectedRowsOld.splice(oldSelectionIndex, 1);
  } else {
    this.selectedRowsOld.push(row);
  }
  // 选择的和初始值对比  的 差值
  const discrepancy = this.selectedRowsOld.filter(x => !selection.some(i => i.productCode == x.productCode));
  // 将处理完的 数组和  其他分页的 原来数组中 合并
  this.selectedRows = selection.concat(discrepancy);
},
//全选
handleSelectAll(selection) {
  // 全选
  if (selection.length) {
    const echoList = [];
    // 全选数组中  将 原来数组没有的 加入 原来数组中
    selection.forEach(item => {
      if (!this.selectedRowsOld.map(itemSon => itemSon.productCode).includes(item.productCode)) {
        echoList.push(item);
      }
    });
    // 将全选当前页 和 其他页的 原来数组的其他数据 合并
    this.selectedRows = this.selectedRowsOld.concat(echoList);
    this.selectedRowsOld = this.selectedRows;
  } else {
    // 取消全选  当前页
    // 将当前页的 数据 从 原来数组中 排除， 排除完的数组 赋值到 selectedRows
    this.tableData.forEach(item => {
      if (this.selectedRowsOld.map(itemSon => itemSon.productCode).includes(item.productCode)) {
        const index = this.selectedRowsOld.findIndex(itemSon => itemSon.productCode == item.productCode);
        this.selectedRowsOld.splice(index, 1);
      }
    });
    this.selectedRows = this.selectedRowsOld;
  }
},
//点击行触发，选中或不选中复选框
handleRowClick(row) {
  this.$refs.multipleTable.toggleRowSelection(row);
  const productCode = row.productCode;
  if (this.selectedRows.find(item => item.productCode == productCode)) {
    const index = this.selectedRows.findIndex(item => item.productCode == productCode);
    this.selectedRows.splice(index, 1);
  } else {
    this.selectedRows.push(row);
  }
},
    

antDesign 解决方案

<a-table
    :columns="productListColumns"
    :dataSource="productData"
    :rowKey="(record, index) => record.productCode"
    :pagination="productPagination"
    :bordered="true"
    :rowSelection="{
      selectedRowKeys: selectedRowKeys,
      onChange: rowSelection,
      onSelect: onSelect,
      onSelectAll: onSelectAll
    }"
    @change="handleproductTable"
  >
  </a-table>

selectedRowKeys: [],  // 用于回显
selectedRows: [],  // 勾选的行的数据   ------------  最终勾选的数据(包含分页 数据)

// 所有商品表格左侧选择数据操作
rowSelection(selectedRowKeys, selectedRows) {
  this.selectedRowKeys = selectedRowKeys;
},
onSelect(record, selected, selectedRows) {
  if (selected) {
    this.selectedRows.push(record);
  }
  if (!selected) {
    let delIndex = this.selectedRows.findIndex(val => {
      return val.id === record.id;
    });
    this.selectedRows.splice(delIndex, 1);
  }
},
onSelectAll(selected, selectedRows, changeRows) {
  if (selected) {
    this.selectedRows = this.selectedRows.concat(changeRows);
  }
  if (!selected) {
    let selectedRows = JSON.parse(JSON.stringify(this.selectedRows));
    let delIndex = [];
    selectedRows.forEach((item, index) => {
      changeRows.forEach((val, itemIndex) => {
        if (item.id === val.id) {
          delIndex.push(index);
        }
      });
    });
    delIndex.forEach(item => {
      delete selectedRows[item];
    });
    selectedRows = selectedRows.filter(item => {
      return item != undefined;
    });
    this.selectedRows = selectedRows;
  }
}