Algunos registros de configuración de antd protable

Sitio web oficial: https://procomponents.ant.design/components/table

1. Solicitud

1. Utilice la solicitud directamente

huevo:

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. Usar onSubmit con fuente de datos

             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);
              }}
              />

2. Algunas configuraciones del formulario de búsqueda

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

3. título del encabezado y representación de la barra de herramientas

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>,
        ]}

Cuatro, configuración de desplazamiento

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

5. Actualizar el formulario y restablecer el formulario ActionRef

Desencadenador manual de ActionRef
A veces necesitamos activar manualmente la recarga de la tabla y otras operaciones, podemos usar actionRef, y la tabla editable también proporciona algunas operaciones para ayudarnos a cumplir los requisitos más rápido.

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);

6. Comprobación de espacio simple de la tabla de formularios

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