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

這次的需求是列表頁可以按照時間進行升降序的排列（直接請求后端）及列篩選，如圖：

 

在打開頁面時，我們要首先請求接口，獲取缺卡類型的篩選數據，然后把數據拼成正確的格式賦給table的column：

// 獲取缺卡類型和缺卡狀態的篩選菜單數據
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>
        );
    }

　　在事件中可以進行類型、狀態、以及排序的參數的存儲，再通過調用接口請求數據：

changeTable = async (pagination, filters, sorter) => {
　　　　　// 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
        });
    };

　　

補充：有一個列表頁需要從其他頁面跳轉，需要攜帶查詢參數，包括了類型，因此做一些補充：

setfilters這個方法里添加類型的初始化：這里用到了antd表格篩選的一個屬性：filteredValue

因為加入初始化設置后，在刷新頁面時，column的渲染依舊會走這個初始化設置，會導致頁面選中篩選項進行查詢后，渲染出來的表頭沒有加入篩選的選中狀態與選中項，所以我們在table的changeTable事件里需要補充：

 

 重新處理column的filteredValue屬性即可。