【antd】Table组件勾选功能：分页后拼接勾选的行数组

项目中遇到这样的问题：在用Table组件勾选功能的时候，在涉及到分页时，我需要拿到两页勾选的数组，但是Table组件打印出来的selectedRows总是当前页的数据，(参考第三张照片)

image.png

image.png

image.png

这个是组件自身的问题，和身边同事讨论出一个比较好的处理方法：二维数组拼接

具体思路：将每一页作为二维数组的下标，将每一页选中的数组作为参数值

具体操作代码如下：

第一步骤：组合成双数组

    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        const { doubleArr, current } = this.state
        // 勾选生成二维数组
        doubleArr[current ? current - 1 : 0] = selectedRows
        this.setState({ 
          selectedRowKeys: selectedRowKeys,
        });
      }
    };

第二步骤：二维数组的扁平化处理（处理为一维数组）

 mapRows = (params)=>{
  var res = []; 
  for(var i=0;i<params.length;i++){
      if(Array.isArray(params[i])){
          res = res.concat(this.mapRows(params[i]));
      }else{
          res.push(params[i])
      } 
  } 
  return res.filter(Boolean);   //去掉undefined的情况
}

第三步骤：调用方法，更新状态

   const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        const { doubleArr, current } = this.state
        // 勾选生成二维数组
        doubleArr[current ? current - 1 : 0] = selectedRows
        // 这块扁平化成为一位数组
        const filterRows = this.mapRows(doubleArr);
        console.log(filterRows, "filterRows") // 这块可以打印出来拼接的结果
        this.setState({ 
          selectedRowKeys: selectedRowKeys,
          filterRows: filterRows // 存放拼接好的一维数组
        });
      }
    };

最后就能拿到两页总的selectedRows数组了～

之前是用hooks写的，再加上一部分封装逻辑，导致有朋友给我说看不懂或者报错的现象，在此特意更改了一下普通写法，顺便把这块代码抽离出来，供朋友们解决问题，完整代码如下：

/*
 * @Description: In User Settings Edit
 * @Author: ysk
 * @Date: 2019-09-29 10:42:36
 * @LastEditTime: 2020-03-17 00:44:37
 * @LastEditors: Please set LastEditors
 */
import React from "react";
import { withRouter } from "react-router-dom";
import "./index.less";
import { Table, Pagination } from "antd";
import { get_parts_list } from "../../../services/api";
class Parts extends React.Component {
  state = {
    responseData: {},
    tableData: [],
    selectedRowKeys: [],
    doubleArr: [], // 存放双数组的数组
    filterRows: [], // 存放拼接后的一维数组的变量
    current: 1 // 页码
  }

  componentDidMount() {
    this.requestList();
  }
  // 数据请求
  requestList = async page => {
    const res = await get_parts_list({ page: page });
    if (res.data.responseCode) return;
    const responseData = res.data.responseData;
    const records = res.data.responseData.records;
    const tableData = records.map((item, index) => {
      item.key = index;
      return item;
    });
    this.setState({
      responseData,
      tableData
    });
  }
  // 分页
  paginationOnChange = page => {
    this.setState(
      {
        current: page
      },
      () => {
        this.requestList(page);
      }
    );
  };
  // 扁平化二维数组的方法
  mapRows = params => {
    var res = [];
    for (var i = 0; i < params.length; i++) {
      if (Array.isArray(params[i])) {
        res = res.concat(this.mapRows(params[i]));
      } else {
        res.push(params[i]);
      }
    }
    return res.filter(Boolean); //去掉undefined的情况
  };

  tableColumns = [
    {
      title: "零件名称",
      dataIndex: "componentName",
      key: "componentName",
      width: "150px",
      // eslint-disable-next-line react/display-name
      render: (index, record) => {
        return <span className="like_a"> {index} </span>;
      }
    },
    {
      title: "一级名称",
      dataIndex: "officeName",
      key: "officeName",
      width: "150px"
    },
    {
      title: "二级名称",
      dataIndex: "departmentName",
      key: "departmentName",
      width: "150px"
    }
  ];
  render() {
    const { responseData, tableData } = this.state;
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        const { doubleArr, current } = this.state
        // 勾选生成二维数组
        doubleArr[current ? current - 1 : 0] = selectedRows
        // 这块扁平化成为一位数组
        const filterRows = this.mapRows(doubleArr);
        console.log(filterRows, "filterRows") // 这块可以打印出来拼接的结果
        this.setState({ 
          selectedRowKeys: selectedRowKeys,
          filterRows: filterRows // 存放拼接好的一维数组
        });
      }
    };
    return (
      <div className="partsContent">
        <Table
          rowKey={record => record.componentId}
          data={responseData} // 所有数据
          dataSource={tableData} // list数据
          columns={this.tableColumns}
          type={"checkbox"} // 2种类型，{'checkbox'}多选 {'radio'}单选 不写type默认没有选框
          request={this.requestList}
          rowSelection={rowSelection}
          pagination={false}
        />
        <Pagination
          className="pagination"
          current={this.state.current}
          total={responseData.total}
          defaultPageSize={responseData.size}
          showQuickJumper={responseData.total > 0}
          showTotal={() => `共${responseData.total || 0}条`}
          onChange={this.paginationOnChange}
        />
      </div>
    );
  }
}

export default withRouter(Parts);

修改于2020.3.17凌晨12.54