QueryFilter 筛选表单
有些时候表单要与别的组件组合使用，常见的有 Table ，List 等，这时候就需要一些特殊形态的表单。QueryFilter 解决了配合组件使用的问题，避免了复杂的样式设置。ProTable 中默认 支持了 QueryFilter 作为自己的筛选表单。
布局说明
- 栅格为 4 列；第 1 行前 3 列 放置前 3 个筛选项（每个通常为
UFormItem根节点），第 4 列 始终为 重置、查询 按钮，以及（在条件 >3 且开启折叠时）展开 / 收起。 - 第 4 个及以后 的筛选项从 第 2 行 起按行填充（每行最多 4 个条件），不会 占用第一行第 4 列。
基础用法
在 默认插槽 中直接写 UFormItem + 控件；通过 v-model:model 绑定表单数据，监听 @search / @reset。
含 5 个筛选项：第 1 行三列 + 第 4 列操作区；第 2 行两个条件。default-collapsed 为 false 以便直接看到全部表单项。
与 ProTable 查询区区别
- QueryFilter 为独立区域，不绑定表格与
request；适合单独页面、弹窗内筛选等。 - ProTable 内建查询区与列配置、分页请求联动；若只需筛选条 UI，可优先本组件。
QueryFilter 属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model | 表单数据，v-model:model | object | object |
| searchText | 查询按钮文案 | string | 查询 |
| resetText | 重置按钮文案 | string | 重置 |
| labelWidth | 透传 UForm 的 label-width（一般 label-position=top 可省略） | string / number | — |
| collapsible | 是否显示「展开/收起」（仅当默认插槽中顶层筛选项数量 >3 时；每个顶层节点计为一格，一般为 UFormItem) | boolean | true |
| defaultCollapsed | 未使用 v-model:collapsed 时，是否默认收起第 2 行及以后 | boolean | true |
| collapsed | 是否收起展开区，v-model:collapsed | boolean | — |
事件
| 名称 | 说明 | 类型 |
|---|---|---|
| search | 点击查询或提交表单，参数为当前 model 的拷贝 | Function |
| reset | 点击重置（会先调用表单的 resetFields，再触发事件） | Function |
| update:collapsed | 展开/收起变化 | Function |
代码片段（仅 2 个条件时）
vue
<script setup lang="ts">
import { reactive } from 'vue'
import { QueryFilter } from 'uniboot-ui'
const form = reactive({ name: '', app: '' })
</script>
<template>
<query-filter v-model:model="form" @search="() => {}" @reset="() => {}">
<u-form-item label="版本名称" prop="name">
<u-input v-model="form.name" placeholder="请输入" clearable />
</u-form-item>
<u-form-item label="应用名称" prop="app">
<u-input v-model="form.app" placeholder="请输入" clearable />
</u-form-item>
</query-filter>
</template>此时第一行第 1、2 列为表单项，第 3 列为空，第 4 列仍为操作区。每个顶层 UFormItem 占一列，请为各项设置 label、prop（如需校验）。
开发说明
实现见 packages/components 仓库 query-filter；构建与联调见 开发指南。