查询条件表单组件ReSearchForm（API）

查询条件表单组件ReSearchForm

组件实现基于 Vue3 + Element Plus + Typescript，同时引用 vueUse + lodash-es + tailwindCss (不影响功能，可忽略)

基于动态表单ReForm组件实现，支持网格布局，展开/折叠控制。ReForm组件可查看另一篇基于Element Plus的动态表单

思路

基于动态表单ReForm组件进行搜索条件配置，采用网格布局方式排列每个表单项。网格支持响应式调整，每个表单项也可以响应调整网格大小。基于 VueUse 的监听元素尺寸变化处理响应式，在基于自己封装的尺寸匹配方法实现整体的布局。

自动去掉一些无用的配置，如分组，纯文本。

替换默认的表单按钮组，重新实现搜索条件自带的按钮组，如查询、重置、折叠/展开。

整体设计：

• 透传属性、事件、插槽给ReForm组件，基于ReForm进行表单渲染
• 改写ReForm默认的按钮组，重新实现查询条件按钮组
• 基于网格响应hook获取网格配置，响应布局变化
• 折叠/展开需要基于网格数量进行表单配置渲染控制

难点

• 折叠/展开需要基于网格数量进行表单配置渲染控制：通过网格数量计算应该展示的表单配置项，在传给ReForm组件进行渲染。

基础应用

通过配置 items 定义搜索条件表单，与 ReForm 配置一致，绑定 search 事件手动发起请求或者传入 request 接口请求方法自动请求。

查看 /demo/search/basic.md

显示标签

设置 showLabel 属性控制搜索条件表单是否展示表单标签，只有为 true 时，labelPosition 和 labelWidth 属性才会生效。

查看 /demo/search/label.md

显示折叠按钮

设置 showCollapsedBtn 属性展示折叠按钮，可通过collapsedText、defaultCollaps