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 },
})

antd 就是 antdesign吗 antd portable_前端框架

ProTable的search,toolBar,toolBarRender属性

antd 就是 antdesign吗 antd portable_react.js_02

search 属性用来配置表格上方的搜索栏(非toolbar),是否显示搜索表单,传入对象时为搜索表单的配置,类型为false | SearchConfig,false时不显示,SearchConfig对象时

antd 就是 antdesign吗 antd portable_数组_03

toolBar属性透传 ListToolBar 配置项,其中search.SearchProps 为 antd 的 Input.Search 的属性。

antd 就是 antdesign吗 antd portable_分页_04

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 使之可以返回上一步