ProTable 数据表格

基于 plus-pro-components / Table 的 dh-design-pc 二次封装，保留 PlusTable 的大部分高级能力，并额外补充了 dh-design-pc 风格的业务操作列策略。

如果业务场景是“筛选 + 表格 + 分页”的完整列表页，优先使用 ProPage；如果只需要单独的一张业务数据表，再直接使用 ProTable。

import { createApp } from 'vue'
import { ProTable } from '@szhn/dh-design-pc'

const app = createApp({})
app.use(ProTable)

基础用法

标题栏

分页栏

自定义状态

自定义表格项（formatter / render）

自定义表格项（插槽）

自定义表头（插槽）

空值展示

序号栏

多选

单选

展开行

树形结构

多级表头

操作栏

操作栏（二次确认）

操作列（平铺）

操作列（更多下拉 + 悬停展开）

远程分页

内容区高度

与 ProSearch 联动

表格设计规范

ProTable 默认对齐 PC 端表格规范：默认行高 40px，紧凑模式 32px，宽松模式 48px；表格只保留横向行分割线和必要的冻结列分隔线，不显示列间竖线；普通空值显示为 -；普通文本列默认开启超出提示；分页区域保持在表格下方并右对齐。

表格形态

表格分为基础形态、行选择形态和可展开形态。基础形态用于纯信息浏览；行选择形态用于批量管理；可展开形态用于父子层级或补充详情，层级建议不超过 2 层。

样式规则

单色表格适用于列数少、信息密度高、需要严格纵向对齐的阅读场景；斑马纹表格适用于列数多、行内容长度不一、需要快速横向定位的宽表格。三档密度分别对应 32px、40px、48px 行高。

表头显示 / 冻结

表头纵向滚动时固定在表格顶部，字段与数据的对应关系不随滚动丢失；核心字段列可固定在左侧，操作列固定在右侧。单元格内容超过列宽时最多展示两行并截断，悬停时展示完整内容。

操作列

操作列固定在表格右侧，直接外露最多 3 项操作；超过 3 项后通过「更多」聚合。每项操作最多显示约 5 个字，超出后截断并在悬停时展示完整文字。

分页器

分页器固定在表格可视区底部，包含每页条数、页码跳转和上一页 / 下一页。表格纵向滚动时分页器不离开视线。

适配规则

表格容器宽度小于 768px 时出现区域级横向滚动（非表格自身滚动条），大于等于 768px 时完整展现。表格内部带侧边筛选导航时：容器小于 1000px 自动收起侧边导航，大于等于 1000px 时展开，以释放横向空间。

常用配置：

<dh-pro-table
  :columns="columns"
  :data="data"
  density="compact"
  empty-cell-text="-"
  fixed-header
  :min-table-width="960"
  cell-text-mode="double"
/>

列宽直接写在列配置里即可；窄屏靠 min-table-width 与外层区域横向滚动适配，无需按断点隐藏列。

const columns = [
  { label: '项目名称', prop: 'name', minWidth: 220, fixed: 'left' },
  { label: '更新时间', prop: 'updatedAt', width: 160 },
]

ProTable API

Props

属性名	说明	类型	默认值
data	表格数据	Array	[]
columns	列定义	PcProColumn[]	[]
loading	表格加载态	boolean	false
total	总条数	number	0
page / v-model:page	当前页码	number	1
page-size / v-model:page-size	每页条数	number	10
density	表格密度，可选 compact / default / loose	string	default
row-height	自定义行高，未传时跟随 density	number	—
empty-cell-text	普通空值占位	string	-
fixed-header	固定表头；未传 height 时默认给表格内容区 420px 高度	boolean	false
min-table-width	表格最小宽度，小容器下由外层区域横向滚动	number / string	—
responsive-min-table-width	≥768 容器宽时表格 min-width 回到 100%，避免多余横向滚动条	boolean	false
cell-text-mode	单元格文本截断方式，可选 single / double	string	single
action-items	业务操作列配置，传入即自动追加一列	PcProActionItem[]	[]
action-max	操作列最大平铺数	number	3
action-more-text	更多操作文案	string	更多
action-hover-expand	鼠标悬停行时是否展开更多操作	boolean	false
action-fixed	操作列固定方向	'left' / 'right' / false	right
action-width	操作列宽度；未传时根据可见操作项内容自动计算	number / string	—
action-label	操作列表头文案	string	操作
has-tool-bar	是否展示工具栏（列配置、密度、刷新等，默认不展示）	boolean	false
has-pagination	是否展示分页	boolean	true
title-bar	标题栏配置，透传给 PlusTable	boolean / object	true

其余 PlusTable 官方属性（如 title-bar、pagination、adaptive、is-selection、is-radio、has-expand、tree-props 等）可直接透传。

Events

事件名	说明	回调参数
update:page	页码变化	(n: number)
update:page-size	每页条数变化	(n: number)
size-change	兼容分页事件	(n: number)
current-change	兼容分页事件	(n: number)
pagination-change	分页变化	(info: PageInfo)

其余 el-table / PlusTable 事件同样支持透传。

Slots

插槽名	说明
title	标题栏左侧区域
toolbar	标题栏右侧工具区域
expand	展开行内容
append	表格底部附加内容
empty	空状态
plus-cell-*	自定义单元格
plus-header-*	自定义表头

Expose

方法名	说明	类型
getTableRef	获取底层 PlusTable 实例	() => PlusTable