SearchFilter 筛选表单

仅桌面端保证样式

查询/重置二合一的筛选表单，fields 配置式声明字段，支持输入框与下拉选择，内置查询/重置按钮与回车触发。

行为要点：

任意字段变更都会 emit update:modelValue，v-model 始终拿到完整值对象；
点击查询按钮或在输入框内回车都会 emit search；loading 期间查询被阻止（按钮加载态并忽略回车），防止重复提交；
点击重置会把每个字段恢复为 defaultValue（未配置则为空串），先 emit reset，searchOnReset 为真时紧接着再 emit 一次 search。

基础用法

  <eb-search-filter
    v-model="sfQuery"
    :fields="[
      { prop: 'keyword', label: '关键词', placeholder: '订单号 / 客户名' },
      { prop: 'status', label: '状态', type: 'select', options: [{ label: '启用', value: 'active' }, { label: '禁用', value: 'disabled' }] },
      { prop: 'region', label: '区域', type: 'select', options: [{ label: '华东', value: 'east' }, { label: '华南', value: 'south' }] },
    ]"
    @search="() => {}"
  />

布局与加载态

columns 控制每行字段数（2 / 3 / 4），loading 时查询按钮进入加载态并阻止重复提交。

  <eb-search-filter
    :fields="[{ prop: 'a', label: '字段一' }, { prop: 'b', label: '字段二' }]"
    :columns="2"
    loading
  />

重置默认值与字段变体

type: 'select' 渲染下拉（options 就地内联声明，适合静态枚举；选项来自接口时先请求再更新 fields 即可）。defaultValue 是重置时的恢复值；select 默认可清空，clearable: false 关闭清空按钮；disabled 字段不可编辑但同样参与重置。

  <eb-search-filter
    v-model="sfReset"
    :fields="[
      { prop: 'level', label: '等级', type: 'select', defaultValue: 'p0', options: [{ label: 'P0', value: 'p0' }, { label: 'P1', value: 'p1' }] },
      { prop: 'email', label: '邮箱', placeholder: 'name@example.com' },
      { prop: 'city', label: '城市', type: 'select', clearable: false, options: [{ label: '杭州', value: 'hz' }, { label: '上海', value: 'sh' }] },
      { prop: 'auditor', label: '审核人', disabled: true },
    ]"
  />

先把等级改成 P1、城市选上海，再点重置：所有字段都恢复为各自 defaultValue（等级回到 P0，其余回到空串），并自动触发一次查询。

自定义操作区

actions 插槽渲染在查询/重置按钮之后，适合放高级筛选入口、保存常用条件等自定义操作。

  <eb-search-filter
    v-model="sfExtra"
    :fields="[{ prop: 'keyword', label: '关键词' }]"
  >
    <template #actions>
      <eb-button text type="primary">高级筛选</eb-button>
    </template>
  </eb-search-filter>

交互：查询取值

search 事件携带当前值对象的快照（拷贝，后续修改不影响已触发的那次）；也可通过实例方法 getValues() 主动取值。

最近一次查询：（尚未查询）

  <eb-search-filter
    v-model="sfLive"
    :fields="[
      { prop: 'keyword', label: '关键词' },
      { prop: 'status', label: '状态', type: 'select', options: [{ label: '启用', value: 'active' }, { label: '禁用', value: 'disabled' }] },
    ]"
    @search="onSfSearch"
  />
  <p style="margin-top: 8px;">最近一次查询：{{ sfLastQuery }}</p>

API

SearchFilter Props

参数	说明	类型	默认值
v-model	筛选值对象	object	{}
fields	字段配置	Field[]	[]
columns	每行字段数	2 / 3 / 4	3
loading	查询加载态	boolean	false
searchOnReset	重置后自动触发查询	boolean	true

Field

参数	说明	类型	默认值
prop	字段名（对应 v-model 键）	string	—
label	标签文本	string
type	控件类型	input \| select	input
options	select 选项 { label, value }	array	[]
placeholder	占位文本	string	请输入 / 请选择
defaultValue	重置时恢复的默认值	any
disabled	是否禁用	boolean	false
clearable	是否可清空	boolean	true

Slots

参数	说明	类型	默认值
actions	追加在查询/重置按钮后的自定义操作区	—	—

Events

参数	说明	类型	默认值
search	点击查询 / 回车 / 重置后触发	(values: object) => void	—
reset	点击重置触发	(values: object) => void	—
update:modelValue	任意字段变更	(values: object) => void	—

Methods

参数	说明	类型	默认值
getValues	取当前筛选值（拷贝）	() => object	—
reset	程序化重置（等价点击重置按钮）	() => void	—
search	程序化查询（等价点击查询按钮）	() => void	—

SearchFilter 筛选表单 ​

基础用法 ​

布局与加载态 ​

重置默认值与字段变体 ​

自定义操作区 ​

交互：查询取值 ​

API ​