ProTable search form表單屬性用法詳解

Protable自帶表單篩選,一般場景適用.

也提供了一些api,方便不同場景使用.這里列出幾種常用的屬性

api:

 

 

1. labelWidth form表單label的寬度,可以是number或者'auto'.默認是80px,實際使用設置為auto更好

   

設置方法

<ProTable
  ...
  search={{ labelWidth: 'auto' }}
/>

 

2. span柵格個數,同antd的Row Col組件,這里要注意,搜索表單有一覽按鈕操作,如果同一行,也算一列.不設置時會根據頁面寬度自動計算個數

 

設置方法

<ProTable
  ...
  search={{ span: 6 }}
/>

 

3. collapsed是否折疊,表單查詢項過多時會默認折疊,可以通過屬性控制.注意,如果變為可控,折疊狀態失效,點擊折疊圖標時需要手動改變值. 如果只需要頁面在初始化改變,可以使用defaultCollapsed設置

 

設置方法

const [collapsed, setCollapsed] = useState<boolean>(true)
<ProTable
  ...
  search={{ 
    collapsed, // 狀態可控
    onCollapse: (value: boolean) => { // 通過方法手動修改狀態
      setCollapsed(value)
    }
  }}
/>

 

4. searchText,resetText查詢,重置按鈕的文本.表單搜索默認有兩個dom.查詢和重置,內置了相關事件方法.可以改變文本

設置方法

<ProTable
  ...
  search={{ 
    searchText: '提交'
  }}
/>

 

5. optionRender,自定義搜索操作組件. searchText,resetText只能修改文字,如果想加入icon或者多添加按鈕,可以通過optionRender自定義.optionRender返回3個參數searchConfig,就是search里的api,例如前面所設置的屬性 formProps,就是search這個form表單示例 dom就是自帶的兩個組件搜索和提交

 

設置方法

<ProTable
  ...
  search={{ 
    optionRender: ({ searchText }, { form }) => {
      // console.log(searchConfig, formProps, dom)
      return [
        <Button
          key="reset"
          icon={<RedoOutlined />}
          onClick={() => {
            form?.resetFields();
          }}
        >
          重置
        </Button>,
        <Button
          key="sub"
          icon={<SearchOutlined />}
          onClick={() => {
            form?.submit();
          }}
        >
          {searchText}
        </Button>,
        <Button key="out" onClick={() => console.log(6668)}>
          導出
        </Button>,
      ];
    },
  })
  }}
/>

 

6. 設置form表單值.設置默認值可以通過設置columns里面的initialValue.如果不是在初始化賦值.可以使用方法在指定時刻賦值.賦值方法和antdesign的form表單一樣

設置方法

const formRef = useRef<ProFormInstance>()

  // 設置form值
  const changeTitle = (value: string) => {
    formRef?.current?.setFieldsValue({
      title: value,
      number: 800,
    })
  }

<ProTable
  ...
  formRef={formRef} // 賦值ref
/>

 

源碼地址: https://github.com/shengbid/antdpro-demo/tree/main/src/pages/proTable/search

文檔地址: https://procomponents.ant.design/components/table/#search-%E6%90%9C%E7%B4%A2%E8%A1%A8%E5%8D%95