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
