ant design pro带分页 自定义表格列 搜索表格组件封装

ant design pro中有一个基础表格的封装，但是分页是前端分页处理数据；
项目中每个页面都有用到表格，且表格都有分页、搜索、自定义表格，所以封装了一个定制的表格组件

实现页面效果

 

组件参数

参数	说明	类型	默认值
tablePatam	表格的一些参数，pageSize/pageNo/loading/filterParam Object {}
data	表格数据	array	[]
rowKey	页面的唯一key	string	“”
pathName	页面路径	String	“”
columns	表格的列数据	Array	[]
changeSearch	改变搜索内容的方法	function
onChange	表格排序、过滤、分页的方法调用	function
handleSearch	处理点击搜索的方法	function
handleRefresh	点击刷新按钮的方法	function
searchPlaceHolder	搜索框中的placeholder内容	String	按名称搜索

封装的注意点

分页

排序

搜索

页面整个代码

组件页面

import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Table, Button, Input, Checkbox, Icon, Popover, Col } from 'antd';
import styles from './index.less';

const { Search } = Input;

function initColumns(columns) {
  const lists = columns.map(i => {
    return {
      show: true,
      ...i,
    };
  });
  return lists;
}

function filterColumes(columns) {
  const filterData = columns.filter(i => !!i.dataIndex);
  const initColumn = filterData.map(i => {
    return {
      dataIndex: i.dataIndex,
      show: i.show,
    };
  });
  return initColumn;
}

function saveColumns(list, path) {
  const str = localStorage.getItem(path);
  let columns = [];
  if (str) {
    const storage = JSON.parse(str);
    list.forEach(item => {
      const one = storage.find(i => i.dataIndex === item.dataIndex);
      const obj = {
        ...item,
      };
      if (one) {
        obj.show = one.show;
      }
      columns.push(obj);
    });
  } else {
    const simple = filterColumes(list);
    localStorage.setItem(path, JSON.stringify(simple));
    columns = list;
  }
  return columns;
}

@connect(({ allspace }) => ({
  allspace,
}))
class RefreshTable extends PureComponent {
  static defaultProps = {
    search: true,
    searchPlaceHolder: '按名称模糊搜索',
    save: true,
    scrollFlag: false,
    scrollY: 0,
    scroll: false,
  };

  constructor(props) {
    super(props);

    this.state = {
      datecolumns: [],
      width: 0,
      columnVisible: false,
    };
  }

  componentDidMount() {
    this.initData();
  }

  componentWillReceiveProps(nextProps) {
    this.initData(); // todo 关于这儿是否有bug测试
    // clean state
    const { datecolumns } = this.state;
    if (nextProps.columns.length > 0 && datecolumns.length > 0) {
      const datecolumnsRefresh = nextProps.columns.map((i, idx) => {
        let nowData = '';
        datecolumns.forEach(item => {
          if (item.dataIndex === i.dataIndex) {
            nowData = item;
          }
        });

        const { show } = nowData;