ProSearch 高级筛选表单
基于 plus-pro-components / Search 的 dh-design-pc 二次封装，用于业务列表页的筛选栏、报表条件区、弹窗内查询表单。
ts
import { createApp } from 'vue'
import { ProSearch } from '@szhn/dh-design-pc'
const app = createApp({})
app.use(ProSearch)基础用法
1 项筛选
2 项筛选
3 项筛选
4 项筛选
4-8 项筛选
8 项以上筛选
已选更多筛选
显示个数
展开收缩隐藏
自定义搜索按钮
默认搜索参数
隐藏 label
异步数据用法
高级筛选入口
ProSearch API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| model-value / v-model | 搜索表单绑定值 | Record | {} |
| columns | 搜索配置数组 | PcProColumn[] | [] |
| layout | auto（按筛选项数量自动切换）/ horizontal / vertical | string | auto |
| col | 每行展示的筛选项数量，支持 1~8 或响应式对象 | number / object | 自动推导 |
| show-number | 折叠前默认展示几个筛选项；启用内建更多筛选时，也作为常用条件和更多条件的分界 | number | ≤8 全展示，>8 默认 8 项 |
| label-width | label 宽度（vertical 布局生效） | string / number | 100px |
| show-more-filter | 是否展示“更多筛选”入口 | boolean | false |
| more-filter-text | “更多筛选”文案 | string | 更多筛选 |
| saved-schemes | 已保存的筛选方案列表 | Array | [] |
| advanced-panel | 是否启用内建高级筛选面板 | boolean | false |
| advanced-visible / v-model:advanced-visible | 内建高级筛选面板显示状态 | boolean | false |
| advanced-title | 内建高级筛选面板标题 | string | 高级筛选 |
| advanced-description | 内建高级筛选面板描述文案 | string | '' |
| advanced-apply-text | 内建高级筛选面板确认按钮文案 | string | 确定 |
| advanced-reset-text | 内建高级筛选面板重置按钮文案 | string | 重置 |
其余 Search 官方属性（如 default-values、has-footer、has-reset、has-unfold、search-loading、has-label、default-unfold 等）可直接透传。若只想复用“更多筛选”入口，也可以只监听 open-advanced，由业务方自行接对话框、抽屉或路由侧栏。
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:model-value | 表单值变化 | (val: Record) |
| update:advanced-visible | 内建高级筛选面板开关变化 | (visible: boolean) |
| search | 点击查询 | (val: Record) |
| reset | 点击重置 | (val: Record) |
| open-advanced | 点击“更多筛选” | — |
| advanced-apply | 点击内建高级筛选面板“确定” | (val: Record) |
| advanced-reset | 点击内建高级筛选面板“重置” | (val: Record) |
| scheme-change | 筛选方案切换 | (scheme) |
Slots
| 插槽名 | 说明 |
|---|---|
| footer | 自定义搜索按钮区域 |
| toolbar | footer 左侧业务操作区 |
| buttonAfter | footer 右侧扩展按钮区域，位于“更多筛选”之后 |
| advanced | 内建高级筛选面板主体内容 |
| advanced-nav | 内建高级筛选面板左侧导航区 |
| advanced-footer | 内建高级筛选面板底部按钮区 |
| tooltip-icon | 自定义 tooltip 图标 |
| plus-field-* | 自定义表单项 |
| plus-label-* | 自定义表单项 label |
| plus-extra-* | 自定义表单项额外说明区域 |
Expose
| 方法名 | 说明 | 类型 |
|---|---|---|
| getFormRef | 获取底层 PlusSearch 实例 | () => PlusSearch |
| closeAdvancedPanel | 主动关闭内建高级筛选面板 | () => void |