antd pro
ProTable官方API: ProTable 在 antd 的 Table 上进行了一层封装,支持了一些预设,并且封装了一些行为。这里只列出与 antd Table 不同的 api。
所以 找不到的可以去antd table找找
#Protable的官方示例,关于request分页current与pageSize参数传递
<ProTable<DataType, Params>
// 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,
};
}}
/>
属性request 为一个异步函数,antd规范要求其传入的第一个参数对象中必须包含current与pageSize,而关于分页的设置 属性pagination 如果不写则有默认缺省格式,并且request中第一个参数中的current与pageSize会同步到pagination,所以这是约定好的。
#import request from 'umi’的基本使用
语法: request(url[, options])
示例:
request('/api/v1/xxx', {
method: 'get',
params: { id: 1 },
})
ProTable的search,toolBar,toolBarRender属性
search 属性用来配置表格上方的搜索栏(非toolbar),是否显示搜索表单,传入对象时为搜索表单的配置,类型为false | SearchConfig,false时不显示,SearchConfig对象时
toolBar属性透传 ListToolBar 配置项,其中search.SearchProps 为 antd 的 Input.Search 的属性。
toolBarRender属性,渲染工具栏,支持返回一个 dom 数组,会自动增加 margin-right,类型(action) => ReactNode[],返回的工具栏组件数组即为toolbar属性的action数组,toolbar属性的action中定义的组件会覆盖掉前者
关于StepsForm和Modal配合使用的问题
StepsForm 和 Modal 配合使用时,Modal 取消后表单无法不能回到第一步。后来尝试用 current 参数控制 step,思路是给每个 StepForm 配置 onFinish 参数,中间每个 StepForm 提交时 current + 1,由于是 current 控制 step,所以最后一个 StepForm 提交时 current 置为 0,Modal onCancel 时 current 置为 0;另外还需要自定义 submitter 使之可以返回上一步