Search 搜索
PlusSearch 是在 PlusForm 组件上自定义 footer 的基础上构建而来，除下文提到 PlusSearch 特有的属性和方法外，同时支持 PlusForm 组件的所有自定义函数和插槽。
注意
表单v-model绑定的值尽量使用 ref 定义绑定的值，以避免 reactive 带来的响应式丢失问题。 参考 reactive 的局限性
基础用法
显示个数
配置 show-number 属性为显示个数，默认值 2。
展开收缩隐藏
配置 hasUnfold 属性为false展开收缩隐藏，同时默认值显示所有搜索框。
自定义搜索按钮
使用search-footer 自定义搜索按钮.
默认搜索参数
配置 defaultValues属性，设置默认搜索参数，当页面点击重置按钮时 PlusSearch 组件的model-value / v-model 会被设置为 defaultValues。
隐藏 label
表单整体的hasLabel 设置为 false 时, 隐藏 label。配置columns中的 hasLabel可以控制单个表单项的 label 是否显示， 优先级会更高。
异步数据用法
PlusColumn 配置中的 options 支持数，函数和 Promise。 PlusColumn 配置中的 fieldProps 支持对象 object，函数和 Promise。
Search API
Search Attributes
| 名称 | 说明 | 类型 | 默认值 | 是否必须 |
|---|---|---|---|---|
model-value / v-model | 搜索表单绑定值 （尽量使用 ref 定义绑定的值，以避免 reactive 带来的响应式丢失问题） | objectFieldValues | 否 | |
defaultValues | 点击重置按钮时 赋值给表单 | object FieldValues | {} | 否 |
columns | 搜索配置信息 | array PlusColumn[] | [] | 否 |
hasFooter | 是否需要全部按钮 | boolean | true | 否 |
hasReset | 是否需要底部按钮 重置 | boolean | true | 否 |
hasUnfold | 是否显示展开收缩按钮， 当 columns 中有效的数据（hideInSearch 不为 true）的长度小于showNumber 时自动隐藏 | boolean | true | 否 |
searchLoading | 查询按钮 loading | boolean | false | 否 |
searchText | 查询按钮文字 | string | 查询 | 否 |
resetText | 重置按钮文字 | string | 重置 | 否 |
retractTextv0.1.16 | 收起按钮文字 | string | 收起 | 否 |
expandTextv0.1.16 | 展开按钮文字 | string | 展开 | 否 |
inline | 一行内显示 | boolean | true | 否 |
showNumber | 默认显示个数 | number | 2 | 否 |
rowProps | el-row 属性 | objectRowProps | {gutter: 20} | 否 |
colProps | el-col 属性 | objectColProps | {xs: 24,sm: 12,md: 8,lg: 8,xl: 6} | 否 |
collapseTransitionv0.1.15 | 是否开启折叠动画 | boolean | true | 否 |
collapseTransitionv0.1.15 | 折叠动画持续时长(单位：ms) | number | 300 | 否 |
needValidatev0.1.15 | 搜索是否需要校验 ，默认不需要校验表单 | boolean | false | 否 |
| ... | ... | ... | ... | ... |
提示
...表示同时支持所有 PlusFrom 方法 Attributes 。
Search Events
| 名称 | 说明 | 类型 |
|---|---|---|
search | 点击查询按钮触发的事件。v0.1.15 版本新增 needValidate，开启后校验通过才会触发 | function |
change | 表单变化触发的事件 | function |
reset | 点击重置按钮触发的事件 | function |
collapsev0.0.6 | 点击展开/收起触发的事件 | function |
Search Slots
| 插槽名 | 说明 | 作用域插槽参数 |
|---|---|---|
footer | 自定义搜索 按钮组 区域 | {isShowUnfold,handleReset,handleSearch,handleUnfold} |
tooltip-iconv0.0.5 | tooltip icon | |
plus-field-* | PlusForm 的自定义表单项，组件会自动根据配置项的 prop 生成对应的插槽 | {prop,label,fieldProps,valueType,column} |
plus-label-* | PlusForm 的自定义表单项 label，组件会自动根据配置项的 prop 生成对应的插槽 | {prop,label,fieldProps,valueType,column} |
plus-extra-* | PlusForm的自定义渲染 el-form-item 下一行额外的内容，组件会自动根据配置项的 prop 生成对应的插槽 | {column} |
footer 作用域插槽参数说明
| 作用域插槽参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
isShowUnfold | 多余搜索表单展开情况 | boolean | false |
handleReset | 执行重置按钮方法 | function | |
handleSearch | 执行搜索按钮方法 | function /v0.1.15 版本新增 needValidate,开启后类型为 async function | |
handleUnfold | 执行展开按钮方法 | function |
Exposes
| 名称 | 说明 | 类型 |
|---|---|---|
plusFormInstance | PlusForm 实例 | object |
handleReset | 执行重置按钮方法 | function |
handleSearch | 执行搜索按钮方法 | function /v0.1.15 版本新增 needValidate,开启后类型为 async function |
handleUnfold | 执行展开按钮方法 | function |
提示
拿到 plusFormInstance 中的 formInstance 可以支持所有PlusFrom 方法， 如 validate,validateField等