Ant Design Pro使用表格显示接口数据

Ant Design Pro使用表格显示接口数据

Ant Design Pro使用，一般都会先做一个列表页面，这时候就会用到表格，今天来说使用表格！

首先放上效果图：

开始码代码

src/pages/Test/Test.js页面代码：

import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
    Card,//卡片
    Button,//按钮
    Divider,//分割线
} from 'antd';
//import styles from './User.less'; 暂时用不到
//表格
import StandardTable from '@/components/StandardTable';//tables
//面包屑
import PageHeaderWrapper from '@/components/PageHeaderWrapper';//面包屑
@connect( test  => ({ test, loading }) => ({
    list : test.data,//请求结果赋值给list
    loading: loading.models.list,
}))
class Test extends PureComponent {
    state = {
        selectedRows: [],//这个是选中 和反选的 必须有，除非你不用复选框
    };
    //定义列
    columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key:"firstName"
        },
        {
            title: '姓名',
            dataIndex: 'name',
        },
        {
            title: '年龄',
            dataIndex: 'age',
        },
        {
            title: '状态',
            dataIndex: 'status',
        },
        {
            title: '操作',
            render: (text, record) => (
                <Fragment>
                    <Button type="primary">编辑</Button>
                    //分割线
                    <Divider type="vertical" />
                    <Button type="danger">删除</Button>
                </Fragment>
            ),
        },
    ];
    //componentDidMount在第一次渲染后调用，只在客户端
    //加载第一页数据， 你们可以把第一页的和以后的整合的一起，用一个方法，我这测试就不整理了
    componentDidMount() {
        const { dispatch } = this.props;
        //参数
        const params = {
           aa:1,
        };
        dispatch({
            type: 'test/fetch',
            payload: params,
        });
    }
    //什么时候调用可以看着里：http://www.runoob.com/react/react-component-life-cycle.html
    //全选 取消
    handleSelectRows = rows => {
        this.setState({
            selectedRows: rows,
        });
    };
    //翻页
    handleStandardTableChange = (pagination) => {
        const { dispatch } = this.props;
        const params = {
            page : pagination.current,
            rows : pagination.pageSize,
        };
        dispatch({
            type: 'test/fetch',
            payload: params,
        });
    };
    render() {
        const{
            list,
            loading,
        } = this.props;
        const { selectedRows } = this.state;
        return (
            <PageHeaderWrapper>
                <Card bordered={false}>
                    <div>
                        <StandardTable
                            rowKey = { list =>  list.id}//这块是默认为key 如果没有key字段必须定义一个字段不然会有错误提示
                            selectedRows={selectedRows}
                            loading={loading}
                            data={list}//数据
                            columns={this.columns}//列
                            onSelectRow={this.handleSelectRows}//选中 取消
                            onChange={this.handleStandardTableChange}//翻页
                        />
                    </div>
                </Card>
            </PageHeaderWrapper>
        )
    }
}
export default Test;

下边是models src/pages/Test/models/test.js代码：

import { queryTest } from '@/services/api';
export default {
//命名空间，如果这里面什么不懂 ，可以看上一篇文章
    namespace: 'test',
    state: {
    //数据结果
        data : [],
    },
    effects: {
        *fetch({ payload }, { call, put }) {
            const response = yield call(queryTest, payload);
            yield put({
                type: 'save',
                payload: response,
            });
        },
    },
    reducers: {
        save(state, action) {
            return {
                ...state,
                data: action.payload,
            };
        },
    },
};

接着是api.js src/pages/services/api.js

再最后加一行:

export async function queryTest(params) {
    return request(`/server/api/test?${stringify(params)}`);
}

我的接口数据

{"list":[{"id":11,"name":"淬端挡末兰孔跺律","age":33,"status":5},{"id":12,"name":"量内恋","age":56,"status":0},{"id":13,"name":"厢输疯椿酶","age":48,"status":3},{"id":14,"name":"季继链肖谷筷氏遍淖","age":45,"status":0},{"id":15,"name":"蚊吭圈轿佛抹快羔灭","age":71,"status":1},{"id":16,"name":"箔抽恕","age":40,"status":5},{"id":17,"name":"司醛饯秘尸箍","age":30,"status":2},{"id":18,"name":"时鞋楷侵","age":30,"status":4},{"id":19,"name":"鸥图般概穆史纠棱乐","age":93,"status":4},{"id":20,"name":"啥桓倪侠似芍氰瓜","age":85,"status":3}],"pagination":{"total":100,"pageSize":10,"current":2}}

ok ! 保存就可以看到效果了！ 你学会了吗？如果不会可以留言我！ 如果也想将自己的经验分享出来，可以联系我！

Ant Design Pro使用表格显示接口数据