antd的table自定义排序思路

const total = processedDataWithoutZero.rows.map(a => a.value).reduce((a, b) => a + b, 0);
一句话就可以将数组里面的总value获取到

antd的table自定义排序思路：

1. columns里面给需要排序的增加一个sortType，代表是按照string还是number排序
2. 需要排序的column增加一个onHeaderCell方法，传一个row
3. 将需要排序的column中的title改成一个函数，接收icon参数generateTitle(icon)，原因是要在title后面增加一个icon，显示是否已经排序

function generateTitle(name, icon) {
  return (
    <span>
      <FormattedMessage id={name} /> {icon && <Icon type={icon} />}
    </span>
  );
}

processColumns() {
    const { sortBy, sortType } = this.state;
    const columns = [{
      title: generateTitle('assets_table_name', sortBy === 'name' ? (sortType === 'asc' ? 'down' : 'up') : 'minus'),
      dataIndex: 'name',
      key: 'name',
      className: 'assets-sort',
      sortType: 'string',
      onHeaderCell: row => this.handleClickHeader(row),
    }, {
      title: generateTitle('assets_table_balance', sortBy === 'balance' ? (sortType === 'asc' ? 'down' : 'up') : 'minus'),
      dataIndex: 'balance',
      key: 'balance',
      className: 'assets-sort',
      sortType: 'number',
      onHeaderCell: row => this.handleClickHeader(row),
      render: text => <tt>{text}</tt>,
    }, {
      title: generateTitle('assets_table_balance_lock', sortBy === 'locked' ? (sortType === 'asc' ? 'down' : 'up') : 'minus'),
      dataIndex: 'locked',
      key: 'locked',
      className: 'assets-sort',
      sortType: 'number',
      onHeaderCell: row => this.handleClickHeader(row),
      render: text => <tt>{text}</tt>,
    }, {
      title: generateTitle('assets_table_balance_amount', sortBy === 'amount' ? (sortType === 'asc' ? 'down' : 'up') : 'minus'),
      dataIndex: 'amount',
      key: 'amount',
      className: 'assets-sort',
      sortType: 'number',
      onHeaderCell: row => this.handleClickHeader(row),
      render: text => <tt>{text}</tt>,
    }, {
      title: generateTitle('assets_table_balance_value', sortBy === 'value' ? (sortType === 'asc' ? 'down' : 'up') : 'minus'),
      dataIndex: 'value',
      key: 'value',
      className: 'assets-sort',
      sortType: 'number',
      onHeaderCell: row => this.handleClickHeader(row),
      render: text => <tt>{parseFloat(text).toFixed(2)}</tt>,
    }, {
      className: 'tb-opt',
      title: generateTitle('assets_table_balance_opt', ''),
      key: 'opt',
      width: 200,
      render: (t, r) => this.getTableOpt(t, r),
    }];
    return columns;
  }

4. column改造完成之后，改造dataSource

processData(data, columns) {
    const { sortBy, sortType } = this.state;
    if (!sortBy) return data;
    const columnSortType = columns.filter(d => d.dataIndex === sortBy)[0].sortType;
    let ret = [...data];
    if (columnSortType === 'string') {
      if (sortType === 'asc') {
        ret = ret.sort((a, b) => a[sortBy] > b[sortBy] ? 1 : -1);
      } else {
        ret = ret.sort((a, b) => a[sortBy] > b[sortBy] ? -1 : 1);
      }
    } else {
      if (sortType === 'asc') {
        ret = ret.sort((a, b) => parseFloat(a[sortBy]) > parseFloat(b[sortBy]) ? 1 : -1);
      } else {
        ret = ret.sort((a, b) => parseFloat(a[sortBy]) > parseFloat(b[sortBy]) ? -1 : 1);
      }
    }
    return ret;
  }

5. 最后是onHeaderCell的方法实现，其实只需要根据sortType，sortBy一级column里面的row来改变排序

handleClickHeader(row) {
    const originSortBy = this.state.sortBy;
    const originSortType = this.state.sortType;
    return {
      onClick: () => {
        let sortBy;
        let sortType = 'asc';
        const dataIndex = row.dataIndex;
        if (!originSortBy) {
          // 若没排序，则正序
          sortBy = dataIndex;
        } else if (originSortBy === dataIndex) {
          // 若相等，则变换
          if (originSortType === 'asc') {
            sortBy = originSortBy;
            sortType = 'desc';
          } else if (originSortType === 'desc') {
            sortType = 'asc';
          }
        } else {
          // 若不相等
          sortBy = dataIndex;
        }
        this.setState({
          sortBy,
          sortType,
        });
      },
    };
  }