公司的一个很新的中后台项目，用到了antd Pro+ts，其中使用了大量的表格。ProTable用起来真的真的很方便。下面我简单介绍几个API
ProTable参数
一，获取接口数据渲染：request
request 是 ProTable 最重要的 API，request 会接收一个对象。对象中必须要有 data 和 success，如果需要手动分页 total 也是必需的。request 会接管 loading 的设置，同时在查询表单查询和 params 参数发生修改时重新执行。同时 查询表单的值和 params 参数也会带入。以下是一个实例：
<ProTable<T, U>
// params 是需要自带的参数
// 这个参数优先级更高，会覆盖查询表单的参数
params={params}
request={async (
// 第一个参数 params 查询表单和 params 参数的结合
// 第一个参数中一定会有 pageSize 和 current ，这两个参数是 antd 的规范
params: T & {
pageSize: number;
current: number;
},
sort,
filter,
) => {
// 这里需要返回一个 Promise,在返回之前你可以进行数据转化
// 如果需要转化参数可以在这里进行修改
const msg = await myQuery({
page: params.current,
pageSize: params.pageSize,
});
return {
data: msg.result,
// success 请返回 true，
// 不然 table 会停止解析数据，即使有数据
success: boolean,
// 不传会使用 data 的长度，如果是分页一定要传
total: number,
};
}}
/>
只需传入一个函数，约束一下函数的返回值，便可以渲染表格，可与params参数搭配使用
二，定义table工具栏：options
table 工具栏，设为 false 时不显示,下图所示为工具栏部分
默认工具栏支持表格刷新，密度，列设置，也可自己定义一些按钮，写法非常灵活
三，定义列名称与数据：columns
ProTable传入一个columns
<ProTable<GithubIssueItem>
columns={columns}
定义columns
const columns: ProColumns<GithubIssueItem>[] = [
{
dataIndex: 'index',
valueType: 'indexBorder',
width: 48,
},
{
title: '标题',
dataIndex: 'title',
copyable: true,
ellipsis: true,
tip: '标题过长会自动收缩',
}
]
column参数
一，定义搜索项目：search
是否显示搜索表单，传入对象时为搜索表单的配置
此参数默认为true，即开启表格的搜索功能，会默认把每一列生成搜索表单
当不需要此搜索项时，在columns里将此项 search：false即可
同时，如果想要只在表单中显示，不在表格中显示，columns里设置 hideInTable：true
二，自定义列的显示：render
有时候需要依赖后端字段渲染列的数据，而不是直接展示
render为一个函数，第二个参数时列数据，第一个是dom，必须有返回值，可以直接返回一个
并绑定事件，为所欲为
render: (_, item) => (
<span onClick={() => handleLogVisible(item.domain)}>{item.domain}</span>
),
以前我是一直觉得vue比较好用的，就是在写下这行代码的一刻，我被react震撼了
