antd pro常见代码示例-ProTable

1、protable使用

这是antd Pro 封装的一个table组件，提供了很多好用的方法，
proTable地址：
protable官网

代码示例：

 <ProTableactionRef={actionRef}pagination={{    //分页设置defaultPageSize: 10,showQuickJumper: true,showSizeChanger: true,pageSizeOptions: ['10', '20', '50', '100'],}}// 需要设置 columns 但不会显示columns={columns}request={loaData}rowKey="id"
/>const loaData = async (params: any, sort: any, filter: any): Promise<any> => {return {data:[{},{}]}};

重要属性说明：
1、request方法：
·这个方法用于请求table的数据，接收params（包含当前页码current、每页数量pageSize 等）参数，请求接口后返回包含data的对象。

actionRef.current?.reload()调用时会执行这个方法，常用于刷新table的数据。

2、columns属性：
这个属性用于定义列。
1、render方法用来决定这一列的显示
2、renderFormItem 用于定义搜索栏的显示
常见代码：

 const columns =[{title: '更新时间',dataIndex: 'updateTime',width: 150,search: false,ellipsis: true,render: (_: any, record: any) => {return record.updateTime ? dayjs(record.updateTime).format('YYYY-MM-DD HH:mm:ss') : '';},},{title: '更新人',dataIndex: 'updateBy',width: 100,search: false,ellipsis: true,renderFormItem: () => <DigitRangeInput />,}]

常见效果图：
在这里插入图片描述

2、自定义ProTable内容

headerTitle属性用于控制title的左侧部分。
toolBarRender 用于控制title右侧部分。
tableRender则是能自定义table表格的显示，其函数会传递table有关的数据。
代码示例：

    <ProTableheaderTitle={<ToolBarLeft></ToolBarLeft>} //控制左侧toolBarRender={() => [<ToolBarRightselectedRows={selectedRows}setSelectedRows={setSelectedRows}></ToolBarRight>,]} //控制右侧// 自定义内容区域tableRender={viewType === 'card'? (prop: any) => {return (<divclassName="ant-pro-card"style={{ backgroundColor: 'white', padding: '0 24px 16px' }}>{prop.toolbarDom}<div>{/* 传分页和勾选的对象 */}<Spin spinning={loading} size="large"><CardContent action={prop.action} rowSelection={prop.rowSelection} /></Spin></div></div>);}: undefined}/>