ProPage 页面骨架
基于 plus-pro-components / Page 的 dh-design-pc 页面级封装，适合“筛选表单 + 表格 + 分页 + 工具栏”的标准业务列表页。
当前组件支持两种模式：
- 基础模式：业务方自行传入
search-model / data / total / page / page-size - request 模式：通过
request、params、before-search-submit管理整页数据流
ProPage 会把分页区域稳定放在表格可视区底部；表格内容出现纵向滚动时，分页不会跟着滚出视线。需要关闭时传 sticky-pagination="false"。
ProPage 默认使用 PC 端业务列表规范：表格常规密度、空值使用 -、单元格单行省略、最小表格宽度 960px、操作列最多平铺 3 项。业务方可通过 table 属性覆盖这些默认值。
ts
import { createApp } from 'vue'
import { ProPage } from '@szhn/dh-design-pc'
const app = createApp({})
app.use(ProPage)基础用法
常用筛选表格模板
以下示例参考最新表格 + N 项筛选模板，包含不同筛选项数量、复合概览、超 8 项“更多筛选”等场景。
手动控制搜索值
搜索参数处理
默认搜索参数
默认分页参数
自定义搜索按钮
自定义搜索表单插槽
搜索和表格展示顺序控制
model-value / v-model
增删改查（CRUD）
ProPage API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| columns | 表格与搜索共享 schema | PcProColumn[] | [] |
| search-model / v-model:search-model | 搜索表单值 | Record | {} |
| data | 表格数据（基础模式） | Array | [] |
| loading | 加载状态（基础模式） | boolean | false |
| total | 总条数（基础模式） | number | 0 |
| page / v-model:page | 当前页码 | number | defaultPageInfo.page |
| page-size / v-model:page-size | 每页条数 | number | defaultPageInfo.pageSize |
| request | request 模式的数据加载函数 | Function | — |
| search | Search 透传配置；传 false 可隐藏搜索区 | object / false | {} |
| table | Table 透传配置，默认带业务列表表格规范 | object | {} |
| params | request 模式附加参数 | object | {} |
| post-data | 对 request 结果中的 data 做二次处理 | Function | — |
| before-search-submit | 请求前转换搜索参数 | Function | — |
| default-page-info | 默认分页参数 | object | |
| default-page-size-list | 默认分页选项列表 | Array | [10,20,50,100] |
| pagination | 分页配置；传 false 可关闭分页 | object / false | — |
| page-info-map | 自定义 request 中的分页字段名 | object | |
| search-slot | 是否将 plus-field-* / plus-label-* 等插槽映射到搜索区 | boolean | false |
| sticky-pagination | 分页是否固定在表格可视区底部 | boolean | true |
| search-layout | dh-pro-search 的布局 | string | auto |
| search-col | dh-pro-search 的列数 | number | 自动推导 |
| search-label-width | 搜索区 label 宽度 | string / number | 100px |
| action-items | 业务操作列配置 | PcProActionItem[] | [] |
| show-more-filter | 是否展示“更多筛选”入口 | boolean | false |
其中 search 属性会继续透传给 dh-pro-search，所以像 advancedPanel、advancedTitle、advancedDescription 这类内建高级筛选面板能力，也可以直接在 ProPage 场景里使用。
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| update:search-model | 搜索表单值变化 | (v: Record) |
| update:page | 页码变化 | (n: number) |
| update:page-size | 每页条数变化 | (n: number) |
| search | 点击查询 | (v: Record) |
| reset | 点击重置 | (v: Record) |
| open-advanced | 点击“更多筛选” | — |
| request-error | request 失败 | (error) |
| request-complete | request 完成 | (result) |
| pagination-change | 页码或 pageSize 变化 | ({ page, pageSize }) |
Slots
| 插槽名 | 说明 |
|---|---|
| search-footer | 自定义搜索按钮区 |
| search-toolbar | 搜索区 footer 左侧业务操作区 |
| advanced / advanced-nav / advanced-footer | 透传到搜索区内建高级筛选面板 |
| table-title | 表格标题左侧区域 |
| table-toolbar | 表格工具栏左侧区域 |
| table-expand | 展开行 |
| table-append | 表格底部附加区域 |
| table-empty | 空状态 |
| pagination-left / pagination-right | 分页器左右区域 |
| plus-cell-* / plus-header-* | 自定义表格单元格 / 表头 |
| plus-field-* / plus-label-* / plus-extra-* / plus-previous-* | 开启 search-slot 后映射到搜索区 |
Expose
| 方法名 | 说明 | 类型 |
|---|---|---|
| getList | 手动触发 request 重新拉数 | Function |
| handleReset | 调用底层搜索区 reset | Function |
| setSearchFieldsValue | 批量设置搜索值 | Function |
| getSearchFieldsValue | 获取全部或单个搜索值 | Function |
| clearSearchFieldsValue | 清空搜索值 | Function |
| setTableData | 手动覆盖当前表格数据 | Function |