react+antd+antd pro+dva ---> table 升降序及筛选的使用（排序+筛选）

这次的需求是列表页可以按照时间进行升降序的排列（直接请求后端）及列筛选，如图：

在打开页面时，我们要首先请求接口，获取缺卡类型的筛选数据，然后把数据拼成正确的格式赋给table的column：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

// 获取缺卡类型和缺卡状态的筛选菜单数据
getTypeListAll = () => {
        const { dispatch } = this.props;
        const param = {
            dictCode: 'lackStatus'
        };
        const param2 = {
            dictCode: 'lackType'
        };
        dispatch({
            type: 'abnormalRank/fetchTypeList',
            payload: param,
            callback: () => {
                dispatch({
                    type: 'abnormalRank/fetchLackTypeList',
                    payload: param2,
                    callback: () => {
                        this.setfilters();
                    }
                });
            }
        });
    };
 
    // 类型/状态-加入表格的筛选，并将最新的column存入state
    setfilters = () => {
        const {
            abnormalRank: { typeList, lackTypeList }
        } = this.props;
        const column = [
            {
                title: '工号',
                dataIndex: 'userNo',
                key: 'userNo'
            },
            {
                title: '姓名',
                dataIndex: 'userName',
                key: 'userName'
            },
            {
                title: '部门',
                dataIndex: 'departName',
                key: 'departName'
            },
            {
                title: '缺卡类型',
                dataIndex: 'typeNick',
                key: 'typeNick',
                filters: []
            },
            {
                title: '缺卡时间',
                dataIndex: 'lackTime',
                key: 'lackTime',
                render: (text, record) => {
                    return <span>{record.lackTime}</span>;
                },
                sorter: () => {}
            },
            {
                title: '状态',
                dataIndex: 'status',
                key: 'status',
                filters: []
            },
            {
                title: '补卡时间',
                dataIndex: 'reissueTime',
                key: 'reissueTime',
                render: (text, record) => {
                    return <span>{record.reissueTime}</span>;
                },
                sorter: () => {}
            },
            {
                title: '相关流程',
                dataIndex: 'applicationNo',
                key: 'applicationNo',
                render: (text, record) => {
                    return (
                        <a
                            onClick={() =>
                                router.push(
                                    `/xxx?abnormalId=${record.userNo}`
                                )
                            }
                        >
                            {record.applicationNo}
                        </a>
                    );
                }
            },
            {
                title: '操作',
                dataIndex: 'action',
                key: 'action',
                render: (text, record) => {
                    return (
                        <div>
                            <span>
                                <Link
                                    to={{
                                        pathname:
                                            '/xxxx',
                                        query: {
                                            id: record.employeeId,
                                            name: record.employeeName,
                                            signDate: record.signDate
                                        }
                                    }}
                                >
                                    打卡记录
                                </Link>
                            </span>
                            <a onClick={() => this.seeDetail(record)}>补卡</a>
                        </div>
                    );
                }
            }
        ];
 
        const lackStatus = [];
        const lackType = [];
        for (let index = 0; index < typeList.length; index += 1) {
            const list = {
                text: typeList[index].dictName,
                value: typeList[index].dictKey
            };
            lackStatus.push(list);
        }
        for (let index = 0; index < lackTypeList.length; index += 1) {
            const list = {
                text: lackTypeList[index].dictName,
                value: lackTypeList[index].dictKey
            };
            lackType.push(list);
        }
        column[3].filters = lackType;
        column[5].filters = lackStatus;
        this.setState({
            columns: column
        });
    };

可以注意到代码中的两个时间的列加了一个空的sorter：

而table的onChange事件里有sorter和filters两个参数【可以参考文档】，jsx代码：

render() {
        const { loading, dispatch, abnormalRank, form } = this.props;
        const { missData, pagination } = abnormalRank;
        const { columns } = this.state;
        const { locale } = new Locale('stat.overtime');
 
        return (
            <Fragment>
                <Form layout="inline" onSubmit={this.handleSubmit}>
                    <Card
                        bordered={false}
                        title="缺卡记录"
                        extra={
                            <Fragment>
                                <Button type="primary" htmlType="submit">
                                    {locale('form.search', false)}
                                </Button>
                            </Fragment>
                        }
                    >
                        <Row type="flex" className="searchTitle">
                            <Col>
                                <QuickForm
                                    form={form}
                                    config={getPath(this.props, 'config')}
                                />
                            </Col>
                        </Row>
                    </Card>
                </Form>
                <Card bordered={false} style={{ marginTop: '24px' }}>
                    <Table
                        dataSource={missData}
                        columns={columns}
                        loading={loading}
                        rowKey="id"
                        onChange={this.changeTable}
                        pagination={{
                            ...pagination,
                            showTotal: total => (
                                <TablePagination
                                    itemsName={Locale.set('items')}
                                    total={total}
                                    pageSize={pagination.pageSize}
                                    onChange={async pageSize => {
                                        await dispatch({
                                            type: 'abnormalRank/setPagination',
                                            pagination: {
                                                ...pagination,
                                                pageSize,
                                                current: 1
                                            }
                                        });
                                        this.fetchList();
                                    }}
                                />
                            )
                        }}
                    />
                </Card>
            </Fragment>
        );
    }<br>

　　在事件中可以进行类型、状态、以及排序的参数的存储，再通过调用接口请求数据：

changeTable = async (pagination, filters, sorter) => {<br>　　　　　// orderBy用来拼接 ‘排序根据词+空格+升序/降序’ 的字符串，用来传给后端，由后端进行数据的整理
        let orderBy;
        let sorterField;
        if (sorter && sorter.field) {
            if (sorter.field === 'lackTime') {
                sorterField = 'lack_time';
            }
            if (sorter.field === 'reissueTime') {
                sorterField = 'reissue_time';
            }
            const order = sorter.order.trim().split('end')[0];
            orderBy = `${sorterField} ${order}`;
            this.setState({
                orderByField: orderBy
            });
        } else {
            this.setState({
                orderByField: ''
            });
        }
 
        const {
            dispatch,
            abnormalRank: { pagination: curPagination }
        } = this.props;
        await dispatch({
            type: 'abnormalRank/setPagination',
            pagination: {
                ...curPagination,
                current: pagination.current
            }
        });
        this.setState(
            {
                lackStatus: filters.status,
                lackType: filters.typeNick
            },
            () => {
                this.fetchList();
            }
        );
    };

请求其他部分代码：

constructor(props) {
        super(props);
        this.state = {
            lackStatus: [],
            lackType: [],
            columns: [],
            orderByField: ''
        };
    }
 
    componentDidMount() {
        this.getTypeListAll();
        this.fetchList();
    }
 
    // 获取列表
    fetchList = () => {
        const {
            dispatch,
            abnormalRank: { pagination },
            form
        } = this.props;
        const { getFieldsValue } = form;
        const { companyDepart, date, userName } = getFieldsValue();
        const parame = {
            companyId: companyDepart.companyId,
            startTime: date.range[0].format('YYYY-MM-DD'),
            endTime: date.range[1].format('YYYY-MM-DD'),
            employeeName: userName || '',
            pageNo: pagination.current,
            pageSize: pagination.pageSize,
            orderByField: getPath(this.state, 'orderByField', ''),
            lackStatus: getPath(this.state, 'lackStatus', []),
            lackType: getPath(this.state, 'lackType', [])
        };
        dispatch({
            type: 'abnormalRank/fetchMylack',
            payload: parame
        });
    };