TablePage

低代码页面设计器的表格区块:标题 + 查询条件栏 + 工具栏 + 数据网格占位,完全由 PageBlock 配置驱动。

最后更新

说明

与设计器里的其它区块组件(ListPage / ChartPage / 布局类)同属一个可插拔页面组件体系:设计器组件库与运行时渲染器 PageRenderer 共用 PageComponents 注册表,区块以字符串键 "table" 引用本组件类型,改类名不影响已发布的页面 JSON。组件不接业务数据,只按 Block.Settings 里的键渲染骨架占位——columns(逗号分隔列名,决定表头与列宽占位)、rows(占位行数,默认 5)、filters(顶部查询条件字段)、toolbar(工具栏动作,设计态未配置时默认给出 新增 / 导入 / 导出)。Design 为真时展示占位骨架与默认工具栏、未绑定列的提示,为假时按已配置的列渲染网格。真实取数与单元格自定义由生成后的业务页各自实现,本组件承担“所见即所发”的画布与运行时呈现。所有可见文本(查询、重置、刷新、列设置、导出、操作、编辑、删除等)均经 LocalService 本地化,样式集中在框架 web.css 的 .pg-block / .pg-table 段。

常见能力:

  • 标题 / 查询条件栏 / 工具栏 / 数据网格四段式区块骨架
  • 列、行数、筛选、工具栏全部由 PageBlock.Settings 键值驱动
  • 设计态与运行态共用同一组件,设计画布即预览
  • 经 PageComponents 注册表按键 table 引用,与已发布页面 JSON 解耦
  • 文本本地化、样式随 data-theme 明暗自动切换

用法

@* 运行时通常经 PageRenderer 按区块树渲染;此处直接构造一个已配置的表格区块 *@
@{ var block = new PageBlock
{
    Component = "table",
    Title = "设备台账",
    Settings = { ["columns"] = "设备编码,设备名称,所属车间,状态",
                 ["rows"] = "4", ["filters"] = "设备编码,状态", ["toolbar"] = "新增,导入,导出" },
}; }

<TablePage Block="block" Design="false" />

API 参数

参数 类型 默认值 说明
Block PageBlock PageBlock 区块数据(列来自 Settings["columns"],行数来自 Settings["rows"],筛选来自 Settings["filters"],工具栏来自 Settings["toolbar"])。
Design bool false 是否设计态。

所有组件均继承 BaseComponent,除上表参数外还支持 Class、Style、Disabled、Visible。

微信公众号二维码 扫码关注公众号
QQ 交流群二维码 扫码加入 QQ 群