antd pro常见代码示例-ProTable

1、protable使用

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

代码示例：

 <ProTable
              actionRef={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有关的数据。
代码示例：

    <ProTable
              headerTitle={<ToolBarLeft></ToolBarLeft>} //控制左侧
              toolBarRender={() => [
                <ToolBarRight
                  selectedRows={selectedRows}
                  setSelectedRows={setSelectedRows}
                ></ToolBarRight>,
              ]} //控制右侧
              // 自定义内容区域
              tableRender={
                viewType === 'card'
                  ? (prop: any) => {
                      return (
                        <div
                          className="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
              }
            />

效果图：
通过上面三个属性就能实现下面的效果，table中我们用卡片的形式展示。

END