Ant Design Pro --------------- ProTable高级表格细节用法（持续更新中...）

热门用法参考官方文档：https://procomponents.ant.design/components/table

一、菜单栏

有些时候菜单栏不需要那么多，而不对菜单栏进行设置就会默认全部显示。所以需要删除一些。
默认全为true,如果不要就设置为false即可。

• 例如不要刷新：

   <ProTable
      options={{ reload: false }}
      />

• 例如全不要：

 <ProTable
      options={false }
      />

二、页码/分页

• 将pagination设为false即为不要页码，主要用于二级表格

<ProTable
      options={{ reload: false }}
      pagination={false}
      />

• 将pagination的defaultPageSize设一页几条数据，主要前端分页

<ProTable
      options={{ reload: false }}
      pagination={{ defaultPageSize: 5 }}
      />

三、排序

1.前端排序

• 在列的设置中加sorter属性自动排序

{
    title: '创建时间',
    width: 140,
    key: 'since',
    dataIndex: 'createdAt',
    valueType: 'date',
    sorter: (a, b) => a.createdAt - b.createdAt,
  },

2.后端排序

{
    title: '创建时间',
    width: 140,
    key: 'since',
    dataIndex: 'createdAt',
    valueType: 'date',
    sorter: {true},
  },

request中的sorter中有排序信息，传给后端即可

 request={async (params, sorter, filter) => {
          const response = await query({ ...params,...sorter,...filter });
         

四、手动筛选

• 在请求到数据以后对数组进行手动筛选，提取需要的数据

• filter方法：
  let 新数组= 旧数组.filter((item) => {
  return 筛选条件;
  });

 request={async (params, sorter, filter) => {
          const response = await query({ ...params,...sorter,...filter });
          const current: number = params?.current || 1;
          const pageSize: number = params?.pageSize || 10;
          const dataSource = response.data.map((item) => {
            return {
              id: item.id,
              name: item.name,
            };
          });
          let filterDataSource: any = [];
          if (params.id !== undefined) {
            filterDataSource = dataSource.filter((item) => {
              return item.id === parseInt(params.id);
            });
          } else {
            filterDataSource = dataSource;
          }
          const result = {
            data: filterDataSource,
            total: filterDataSource.length,
            success: true,
            pageSize,
            current: parseInt(`${current}`, 10) || 1,
          };
          return Promise.resolve(result);
        }}
     

五、ref.current.reload()失效

原因：设置DataSource后ref.current.reload()失效
后果：表格自带刷新失效，手动刷新失效
解决方法：手动刷新使用重新请求方式，自动刷新把图标删了

六、 轮询

七、操作项排版

因为官方文档中的不能绑定事件
但操作项太多字数不均等造成排版杂乱
这里用…Dropdown收成下拉列表并绑定事件

 <a
              onClick={() => {
                setDrawerVisible(true);
                seCloneData(record);
              }}
            >
              克隆
            </a>
            <Divider type="vertical" />
            <a
              onClick={() => {
                handleModalVisible(true);
                setTaskID(record.task_id || 0);
                setLogsHost(record.logs_host);
              }}
            >
              Kubeflow
            </a>
            <Divider type="vertical" />
            <Dropdown
              overlay={() => {
                return (
                  <Menu>
                    <Menu.Item key="1">
                      <Popconfirm
                        key="Popconfirm"
                        placement="left"
                        title="您确定删除该任务吗?"
                        onConfirm={}
                        okText="Yes"
                        cancelText="No"
                      >
                        <a
                          href=""
                          key="delete"
                          onClick={() => {
                            setDeleteTask(record.task_id || 0);
                          }}
                        >
                          删除
                        </a>
              
                    </Menu.Item>
                  </Menu>
                );
              }}
            >
              <a key="more">
                <EllipsisOutlined />
              </a>
            </Dropdown>