搜索框

基本用法

支持通过插槽对所有的可见元素,如输入框,新增按钮等进行自定义

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搜索栏默认按钮的布局arrayseach/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,在默认插槽中补充需要的内容