前言
承接上一篇博客Ant Design Pro 新增一个表格页面（一）
继续对index.tsx进行修改
请求相关修改
复制过来的index.tsx文件中的请求都是rule的增删查改，将其修改为前文已经写好的接口请求。
import { rule, addRule, updateRule, removeRule } from '@/services/ant-design-pro/api';
import { members, addMember, updateMember, removeMember } from '@/services/ant-design-pro/api';
需要注意的是接口请求需要一些修改，例如修改用户接口：
/** 修改用户 PUT /index.php/api/member/update */
export async function updateMember(params: object, data: object, options?: { [key: string]: any }) {
return request<API.MemberListItem>('/index.php/api/member/update', {
method: 'PUT',
params: {...params},
data: {...data},
...(options || {}),
});
}
这里我给修改用户的这个请求添加了参数params和data。params是查询参数，附加在url后，data则是post到服务器的数据。options暂时不清楚怎么使用。
例如修改某个用户的用户名以及备注：index.tsx中这样调用：
const handleUpdate = async (fields: FormValueType) => {
const hide = message.loading('正在配置');
try {
await updateMember(
{ id: fields.id },
{
name: fields.name,
remark: fields.remark,
},
);
hide();
message.success('配置成功');
return true;
} catch (error) {
hide();
message.error('配置失败请重试！');
return false;
}
};
跟踪handleUpdate的调用，可以发现它是在UpdateForm提交事件的回调中被调用，同时参数fields被填充为updateForm提交的数据。
添加用户及删除用户接口也是类似的修改，省略这个过程。
API数据规范修改
原文件中的 API.RuleListItem[] 修改为前文写好的 API.MemberListItem[]
列配置修改
一般列配置
找到列配置代码：
const columns: ProColumns<API.MemberListItem>[] = []
配置一个最简单的列，只需要设置好title和dataIndex即可，dataIndex指定从接口中获取哪项数据。
const columns: ProColumns<API.MemberListItem>[] = [
{
title: '用户名',
dataIndex: 'username',
},
]
根据业务的需要，展现各个数据。
复杂列配置
举个简单的应用场景例子：
- 后端返回的时间戳以秒为单位，而设置valueType为dateTime默认转换的是以毫秒为单位的时间戳，导致无法使用valueType自动转换。个人简单的处理方案：
{
title: "时间"
dataIndex: 'time',
renderText: (text: number) => {
return text * 1000;
},
valueType: "dateTime",
}
值得一提的是：先执行renderText，将时间戳 * 1000，valueType会对这个返回值进行转换
更复杂的、自定义的列配置请参考官方文档API：ProTable的Columns列配置
结语
至此，基本能搭建一个用于展示所有用户的列表页面，但是其实还有许多地方是值得深入研究的
- useState的使用：React的最新特性hooks
- Modal浮层/Drawer抽屉的展现与隐藏控制
- 实现自定义一个操作去请求接口
