Ant Design Pro里的ProTable、ProLayout等

找到文档了... AntDesign Pro中的高级组件基本都在这:https://procomponents.ant.design/components

前言 - 官网没找到Protable的说明文档 ,这些是从依赖包里的README.md里扒来的;
还有 - 下面request方法要求返回一个object,格式如下:

   const res:any[] = [{···},{···}];
   const result = {
     data: res,
     total: res.length,
     success: true,
     pageSize: 10,
     current: 1,
   };
   return result;

Demo

codesandbox

API

pro-table 在 antd 的 table 上进行了一层封装,支持了一些预设,并且封装了一些行为。这里只列出与 antd table 不同的 api。

Table

属性 描述 类型 默认值
request 一个获得 dataSource 的方法 (params?: {pageSize: number;current: number;[key: string]: any;}) => Promise> -
postData 对通过 url 获取的数据进行一些处理 (data: T[]) => T[] -
defaultData 默认的数据 T[] -
actionRef get table action `React.MutableRefObject ((actionRef: ActionType) => void)`
toolBarRender 渲染工具栏,支持返回一个 dom 数组,会自动增加 margin-right (action: UseFetchDataAction>) => React.ReactNode[] -
onLoad 数据加载完成后触发,会多次触发 (dataSource: T[]) => void -
tableClassName 封装的 table 的 className string -
tableStyle 封装的 table 的 style CSSProperties -
options table 的默认操作,设置为 false 可以关闭它 {{ fullScreen: boolean | function, reload: boolean | function,setting: true }} { fullScreen: true, reload:true , setting: true }
search 是否显示搜索表单,传入对象时为搜索表单的配置 boolean | { span?: number | DefaultColConfig,searchText?: string, resetText?: string, collapseRender?: (collapsed: boolean) => React.ReactNode } true
dateFormatter moment 的格式化方式 "string" | "number" | false string
beforeSearchSubmit 搜索之前进行一些修改 (params:T)=>T -

Columns

属性 描述 类型 默认值
renderText 类似 table 的 render,但是必须返回 string,如果只是希望转化枚举,可以使用 valueEnum (text: any,record: T,index: number,action: UseFetchDataAction>) => string -
render 类似 table 的 render,第一个参数变成了 dom,增加了第四个参数 action (text: React.ReactNode,record: T,index: number,action: UseFetchDataAction>) => React.ReactNode | React.ReactNode[] -
renderFormItem 渲染查询表单的输入组件 (item,props:{value,onChange}) => React.ReactNode -
ellipsis 是否自动缩略 boolean -
copyable 是否支持复制 boolean -
valueEnum 值的枚举,会自动转化把值当成 key 来取出要显示的内容 valueEnum -
valueType 值的类型 'money' | 'option' | 'date' | 'dateTime' | 'time' | 'text'| 'index' | 'indexBorder' 'text'
hideInSearch 在查询表单中不展示此项 boolean -
hideInTable 在 Table 中不展示此列 boolean -
formItemProps 查询表单的 props,会透传给表单项 { [prop: string]: any } -

ActionType

有些时候我们要触发 table 的 reload 等操作,action 可以帮助我们做到这一点。

interface ActionType {
  reload: () => void;
  fetchMore: () => void;
  reset: () => void;
}

const ref = useRef();

;

// 刷新
ref.reload();

// 加载更多
ref.fetchMore();

// 重置到默认值
ref.reset();

valueType

  • money 转化值为金额 eg. ¥10,000.26
  • date 日期 eg. 2019-11-16
  • dateTime 日期和时间 eg. 2019-11-16 12:50:00
  • time 时间 eg. 12:50:00
  • option 操作项,会自动增加 marginRight,只支持一个数组
  • text 默认值,不做任何处理
  • index 序号列
  • indexBorder 带 border 的序号列

valueEnum

当前列值的枚举

interface IValueEnum {
  [key: string]:
    | React.ReactNode
    | {
        text: React.ReactNode;
        status: 'Success' | 'Error' | 'Processing' | 'Warning' | 'Default';
      };
}

Usage

npm install @ant-design/pro-table
# or
yarn add @ant-design/pro-table
import ProTable, { ProColumns } from '@ant-design/pro-table';

const columns: ProColumns[] = [
  {
    title: 'Name',
    dataIndex: 'name',
    copyable: true,
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'date',
    dataIndex: 'date',
    valueType: 'date',
  },
  {
    title: 'option',
    valueType: 'option',
    dataIndex: 'id',
    render: (text, row, index, action) => [
       {
          window.alert('确认删除?');
          action.reload();
        }}
      >
        delete
      ,
       {
          window.alert('确认刷新?');
          action.reload();
        }}
      >
        reload
      ,
    ],
  },
];

export default () => (
   [
       setKeyword(value)}
      />,
      ,
      ,
    ]}
    pagination={{
      defaultCurrent: 10,
    }}
  />
);

LICENSE

MIT

你可能感兴趣的:(Ant Design Pro里的ProTable、ProLayout等)