首页 > 其他分享> 文章详细

ProTable search form表单属性用法详解

2022-01-25 17:05:47 阅读：871 来源： 互联网

标签：search const form 表单设置 ProTable 方法

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

标签：search,const,form,表单,设置,ProTable,方法
来源： https://www.cnblogs.com/steamed-twisted-roll/p/15843657.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

ProTable search form表单属性用法详解