项目正在快速迭代中,API 与视觉细节可能随版本调整,请勿用于生产环境。
仅桌面端保证样式

TablePage 表格页 ​

CRUD 列表页的整页封装:页头(标题 / 描述 / 动作)、查询区、工具栏、表格 + 分页四区一体,内部由 request 数据代理驱动——翻页、查询、重置、远程排序与筛选全自动联动,开箱即得「撑满剩余空间、表格内部滚动」的中后台页面骨架。

基础用法 ​

传 request(返回 { list, total })+ fields(查询字段)+ columns 即可成一个完整列表页:查询区自带查询 / 重置按钮(回车触发),翻页自动携带 page / pageSize 重查,筛选条件合并进请求参数并回第 1 页。

订单列表

全部销售订单

暂无数据
共 0 条
  • 1

远程排序与筛选 ​

remote-sort(默认开)把列排序写入请求参数(sort-prop-key / sort-order-key,默认 sortProp / sortOrder,值为 asc / desc),以当前页重查;remote-filter 把列筛选收敛为 filters 参数并回第 1 页。关闭时回落表格内建的客户端排序与过滤。

人员名单

暂无数据
共 0 条
  • 1

最近一次排序:未排序(筛选以 depts 参数提交)

撑满剩余空间 ​

fit 默认开:整页撑满 flex 父容器的剩余高度,表格区自动量高、内部滚动,工具栏与分页常驻可视区——列表再长也不整页滚。父链保持 flex column 或给定确定高度即可。

运行日志

fit 模式:表格内部滚动,工具栏与分页不随页面滚走

暂无数据
共 0 条
  • 1

EbDataTable 也单独提供 fit:给已有页面里的数据表格单独开启同样的高度自适应。

Methods ​

通过模板 ref 调用;refresh 用于增删改后以当前参数重查,search / reset 与查询区按钮同一入口。

TablePage Methods

参数说明类型默认值
refresh以当前参数重查() => Promise<void>—
search合并筛选并回第 1 页重查(filters?) => Promise<void>—
reset恢复 defaultParams 回第 1 页重查() => Promise<void>—
run以显式参数覆盖重查(overrides?) => Promise<void>—
clearSelection / toggleRowSelection / toggleAllSelection多选操作(透传表格)() => void—
sort / clearSort程序化排序(透传表格)(prop, order) => void—
params / data / total / loading / selection响应式状态读取Reactive | Ref—

Slots

参数说明类型默认值
search自定义查询表单,作用域 { params, search, reset, loading }(传入后 fields 查询区让位)——
toolbar工具栏右侧操作区,作用域 { selection, selectionCount, refresh, clearSelection }——
operations操作列内容,作用域 { row, $index, column }——
header自定义页头(替代标题 + 描述)——
extra页头右侧动作区——
empty空数据占位内容——
列插槽columns 里声明 slot 后由同名插槽渲染单元格,原样透传——

Events

参数说明类型默认值
page-change页码或每页条数变化({ page, pageSize }) => void—
sort-change排序变化(remote-sort 下写入参数后自动重查)({ prop, order, column }) => void—
filter-change列筛选变化(filters) => void—
selection-change多选项变化(rows) => void—
row-click / cell-click行 / 单元格点击(e) => void—
cell-change行内编辑提交(e) => void—