博客

官网：

https://procomponents.ant.design/components/table

一、请求

1、直接使用request

egg:

request={async (params: Record<string, any>) => {
              const {
                keyword, // 一些自定义的搜索字段
                current,//当前页数
                 ...res
              } = params;
             
              const newSearchParams = {
                page: current,
                keyword,
              };
              setSearchParams(newSearchParams);
              //可以直接 return fetchSearchList(newSearchParams)
              //也可以如下分开来写
              const result = await fetchSearchList(newSearchParams);//请求
              return {
                data: result.data,
                total: result.total,
                success: true,
              };
            }}

2、使用onSubmit配合dataSource

             const [ListSource, setListSource] = useState<any>();
             const [searchParams, setSearchParams] = useState<any>();
               useEffect(() => {
			      fetchSearchList({ page: 1, pageSize: 10, ...searchParams }).then(res => {
			        if (res.code === 200) {
			          setListSource(res.data)
			        }
			      })
			  }, [searchParams])


             <ProTable
              dataSource={ListSource}
              onSubmit={(params: Record<string, any>) => {
                const {
                  keyword,
                  current
                } = params;
             const newSearchParams = {
                page: current,
                keyword,
              };
                setSearchParams(newSearchParams);
              }}
              />

二、search表单的一些配置

          search={{
              labelWidth: 'auto', //默认80，有时候字段多的时候显示不全，可改为 auto
              collapsed: false, // 是否收起
              span: 6, // span默认一行显示三列，通过调整span调整显示多少列
            }}

三、headerTitle 和 toolBarRender

headerTitle={
          <Space>
            <span>Basic Table</span>
            <Select<string>
              bordered={false}
              value={intl}
              onChange={(value) => {
                dayjs.locale(intlMap[value].locale);
                setIntl(value);
              }}
              options={Object.keys(intlMap).map((value) => ({ value, label: value }))}
            />
          </Space>
        }
        toolBarRender={() => [
          <Button key="3" type="primary">
            <PlusOutlined />
            New
          </Button>,
        ]}

四、scroll配置

    <ProTable
      scroll={{ x: 1600 }} //可视宽度，超过会显示滚动条
     />

五、刷新表单，重置表单 ActionRef

ActionRef 手动触发

有时我们要手动触发 table 的 reload 等操作，可以使用 actionRef，可编辑表格也提供了一些操作来帮助我们更快的实现需求。

interface ActionType {
  reload: (resetPageIndex?: boolean) => void;
  reloadAndRest: () => void;
  reset: () => void;
  clearSelected?: () => void;
  startEditable: (rowKey: Key) => boolean;
  cancelEditable: (rowKey: Key) => boolean;
}

const ref = useRef<ActionType>();

<ProTable actionRef={ref} />;

// 刷新
ref.current.reload();

// 刷新并清空,页码也会重置，不包括表单
ref.current.reloadAndRest();

// 重置到默认值，包括表单
ref.current.reset();

// 清空选中项
ref.current.clearSelected();

// 开始编辑
ref.current.startEditable(rowKey);

// 结束编辑
ref.current.cancelEditable(rowKey);

六、form表单纯空格校验

      //whitespace: true 不能输入纯空格符
       <Form.Item
          label="主题"
          name="theme"
          rules={[{ required: true, message: '请输入主题', whitespace: true }]}
        >
          <Input placeholder="请输入主题" />
        </Form.Item>