搜索框
基本用法
支持通过插槽对所有的可见元素,如输入框,新增按钮等进行自定义
WARNING
在触发created
时,组件会保存modelValue
的值做为后续重置操作的数据源,否则会默认清空所有的搜索条件
默认值
对于需要动态更改默认搜索条件的,可以通过设置defalut-value
来确保重置
后的搜索条件会及时更新。或者也可以通过重写reset
方法来手动维护重置的状态。
主要是为了处理重置状态与初始的查询状态不一致的问题,比如初始的查询参数部分来自路由,而重置时不需要这部分额外参数
TIP
对于重置时设置的值,优先使用default-value
绑定的值,如果没有设置,会使用在created
阶段通过v-model/modelValue
传递的值。
{ "page": 1, "size": 10, "name": "veneto" }
输入框标签
可以通过name-mode
来决定标签的展示形式,是作为placeholder
还是外部的label
属性
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
v-model/modelValue | 绑定值 | object | - | - |
name-mode | 输入框标题的展示方式 | string | 'placeholder' | 'label' | 'placeholder' |
page-name | 分页时当前页码的字段 | string | - | 'page' |
default-value | 重置时的默认值 | object | - | - |
create | 是否显示新增按钮 | boolean | - | false |
config | 搜索栏的可查询内容 | config[] | - | - |
search | 搜索和重置触发时的回调函数 | function | - | - |
import | 是否显示上传按钮 | boolean | - | false |
upload | 文件上传的相关配置 | object | - | - |
export | 是否显示导出按钮 | boolean | - | true |
layout | 搜索栏默认按钮的布局 | array | seach /reset /upload /export /create | ['create', 'search', 'reset', 'upload', 'export'], |
Config属性
名称 | 说明 |
---|---|
prop | 绑定值的字段(支持链式调用) |
catalog | 支持的搜索方式(input , select , datepicker ) |
TIP
不设置catalog
时,可以通过对应prop
的具名插槽自定义搜索方式
插槽
名称 | 说明 |
---|---|
- | 自定义搜索栏除自带的按钮外的其它功能 |
#prop | 自定义对应prop 的搜索框的内容 |
create | 自定义新增按钮 |
search | 自定义搜索按钮 |
reset | 自定义重置按钮 |
export | 自定义导出按钮 |
upload | 自定义上传按钮 |
WARNING
上述的按钮目前在自定义后会失去原先的点击事件,诸如搜索、重置这些功能需要手动实现。
TIP
layout
属性也会影响到自定义属性。如果需要完全的自定义,可以通过清空layout
,在默认插槽中补充需要的内容