先看看效果如下
文章图片
实现方式
首先我们先写两个接口,创建一个data.d.ts文件
export interface SingleUserType {
id: number;
name: string;
email: string;
create_time: string;
update_time: string;
status: number;
}
export interface FormValues {
[name: string]: any;
}
然后再写一个网络请求的接口，因为数据是从后台返回的嘛,创建一个service.ts
import { extend } from 'umi-request';
import { message } from 'antd';
import { FormValues } from './data.d';
const errorHandler = function(error: any) {
if (error.response) {
if (error.response.status > 400) {
message.error(error.data.message ? error.data.message : error.data);
}
} else {
// The request was made but no response was received or error occurs when setting up the request.
// console.log(error.message);
message.error('Network Error.');
}throw error;
// If throw. The error will continue to be thrown.// return {some: 'data'};
If return, return the value as a return. If you don't write it is equivalent to return undefined, you can judge whether the response has a value when processing the result.
// return {some: 'data'};
};
const extendRequest = extend({ errorHandler });
//获取列表
export const getRemoteList = async ({
page,
per_page,
}: {
page: number;
per_page: number;
}) => {
return extendRequest(
`http://public-api-v1.aspirantzhang.com/users?page=${page}&per_page=${per_page}`,
{
method: 'get',
},
)
.then(function(response) {
return response;
})
.catch(function(error) {
return false;
});
};
由于我们的数据都是通过dva来进行管理的，dva就相当于react的redux，vue的vuex,创建一个model.ts
特别说一下，我们这个页面是在users文件夹下面，不明白的可以参考一下Umi文档，为什么要这样写
import { Reducer, Effect, Subscription } from 'umi';
import { getRemoteList } from './service';
import { SingleUserType } from './data.d';
export interface UserState {
data: SingleUserType[];
meta: {
total: number;
per_page: number;
page: number;
};
}interface UserModelType {
namespace: 'users';
state: UserState;
reducers: {
getList: Reducer;
};
effects: {
getRemote: Effect;
};
subscriptions: {
setup: Subscription;
};
}const UserModel: UserModelType = {
namespace: 'users',
state: {
data: [],
meta: {
total: 0,
per_page: 5,
page: 1,
},
},
reducers: {
getList(state, { payload }) {
return payload;
},
},
effects: {
*getRemote({ payload: { page, per_page } }, { put, call }) {
const data = https://www.it610.com/article/yield call(getRemoteList, { page, per_page });
if (data) {
yield put({
type:'getList',
payload: data,
});
}
},
},
subscriptions: {
setup({ dispatch, history }) {
history.listen(({ pathname }) => {
if (pathname === '/users') {
dispatch({
type: 'getRemote',
payload: {
page: 1,
per_page: 5,
},
});
}
});
},
},
};
export default UserModel;
好了，可以开始页面渲染了
import {FC } from 'react';
import {
Button,
Pagination
} from 'antd'import ProTable, { ProColumns } from '@ant-design/pro-table';
import { connect, Dispatch, Loading, UserState } from 'umi';
import { SingleUserType } from './data.d';
interface UserPageProps {
users: UserState;
dispatch: Dispatch;
userListLoading: boolean;
}const UserListPage: FC = ({
users,
dispatch,
userListLoading,
}) => {
const columns: ProColumns>[] = [
{
title: 'ID',
dataIndex: 'id',
valueType: 'digit',
key: 'id',
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
valueType: 'text',
render: (text: any) => {text},
},
{
title: 'Create Time',
dataIndex: 'create_time',
valueType: 'dateTime',
key: 'create_time',
},
{
title: 'Action',
key: 'action',
valueType: 'option',
render: (text: any, record: SingleUserType) => [
Edit
,
Delete
],
},
];
const resetHandler = () => {
dispatch({
type: 'users/getRemote',
payload: {
page: users.meta.page,
per_page: users.meta.per_page,
},
});
};
const paginationHandler = (page: number, pageSize?: number) => {
dispatch({
type: 'users/getRemote',
payload: {
page,
per_page: pageSize ? pageSize : users.meta.per_page,
},
});
};
const pageSizeHandler = (current: number, size: number) => {
dispatch({
type: 'users/getRemote',
payload: {
page: current,
per_page: size,
},
});
};
return (
{
resetHandler();
},
setting: true,
}}
headerTitle="User List"
toolBarRender={() => [
,
,
]}
/>
`Total ${total} items`}
/>
);
};
const mapStateToProps = ({
users,
loading,
}: {
users: UserState;
loading: Loading;
}) => {
return {
users,
userListLoading: loading.models.users,
};
};
export default connect(mapStateToProps)(UserListPage);
详细项目可以去github，上面增删改查功能都完备
【umi3|Umi3结合@ant-design/pro-table实现一个ProTable页面】https://github.com/lsh555/Umi-demo
