nsecn
  • 4
  • 新人请关照

Antd 表格分页,分页加载时闪烁出现“暂无数据”问题

问题描述

"antd": "^3.26.15"

Antd 表格分页设置loading为false,点击分页时闪烁出现“暂无数据”问题,数据展示正常,参考官方的代码还是没解决,问题如图:
20200429105025.png

hlsf.jpg

相关代码

// 组件代码
<Table size="middle"
   columns={this.columns}
   rowKey={record => record.id}
   rowSelection={this.rowSelection}
   dataSource={this.props.items}
   pagination={this.props.pagination}
   bordered={false}
   loading={this.props.loading}
   onChange={this.handlePage}
/>

handlePage = (param) => {
        let dynamic = {};
        let fields = this.props.form.getFieldsValue();
        dynamic[fields.fieldName] = fields.content;
        param = Object.assign({page: param.current, size: param.pageSize}, dynamic);
        this.props.changePage(param);
    }

const mapDispatchToProps = dispatch => {
    return {
        fetchItems: () => {
            dispatch(fetchItems({page: 1, size: 10}));
        },
        changePage: (param) => {
            dispatch(fetchItems(param));
        }
    }
};
// Action代码
export function fetchItems(param) {
    param = JSON.stringify(param);
    param = encodeURI(param);
    return dispatch => {
        dispatch({type: 'OPERATION_BEGIN'});
        return fetch(server + '/brand/load?param=' + param + '&t=' + new Date().getTime(), {
                method: 'GET',
                mode: 'cors'
            })
            .then(response => response.json())
            .then(data => {
                dispatch(queryItems(data));
            }).catch(error => {
                console.log(error);
                dispatch({type: 'OPERATION_END'});
            }
        );
    }
}
// Reducers 代码
const items = (state = [], action) => {
    switch (action.type) {
        case 'OPERATION_BEGIN': {
            return {loading: true};
        }
        case 'OPERATION_END': {
            return {loading: true};
        }
        case 'QUERY_ITEMS': {
            if (!action.data) {
                return {loading: false};
            }
            let pagination = {
                total: action.data.total,
                showTotal: (total) => `共 ${total} 条`,
                current: action.data.pageNumber,
                showSizeChanger: true,
                showQuickJumper: true,
                pageSizeOptions: ['10', '20', '30', '50']
            };
            return {items: action.data.content, loading: false, pagination: pagination};
        }
        case 'ADD_ITEM': {
            return state;
        }
        default: {
            return state;
        }
    }
}

期待结果

分页设置loading为false时,不要闪烁出现“暂无数据”,应该隐藏。
求助解答,谢谢!

阅读 96
评论
    撰写回答

    登录后参与交流、获取后续更新提醒