Table

说明

核心组件。Columns 用 TableColumn 描述列；给 ScrollY 即启用滚动容器并固定表头，数据在容器内纵向滚动、超宽横向滚动。复选框列与操作列自动钉边，普通列可用 Fixed="left|right" 钉列。Virtual 让大数据量按可视区分窗渲染、无需分页。AutoPaging 让表格对排序/过滤后的全部结果内部按 Page/PageSize 分页、Total 取全部条数（跨页排序/过滤一致），服务端分页则关闭它、只传当前页与 Total。列头支持三态排序、过滤与自定义模板，单元格支持自定义模板与省略号。列设置 Children 即为分组表头（多级列头，父列 colspan、未分组叶子 rowspan）；列开启 MergeRows 让相邻同值自动跨行合并，或用表级 OnCellMerge 回调返回 CellMerge(rowSpan, colSpan) 做任意跨行/跨列，被覆盖的格子自动跳过。ShowFooter 显示固定在容器底部的合计行（数字列自动求和），ShowGrandTotal 再加一行跨页“全部合计”；本页合计按当前页求和、全部合计按整个查询结果求和（服务端分页经 GrandTotal 传入）。列有两种写法：列表参数 Columns 传 TableColumn 集合，或把 子组件直接写在

常见能力：

• 固定表头 + 容器内滚动
• 横向滚动 + 左右钉列
• 虚拟滚动（不分页）
• 客户端自动分页 AutoPaging
• 三态列头排序（双箭头指示）
• 列头过滤
• 自定义列头模板
• 自定义单元格模板
• 标记列 写法
• 超宽省略号
• 合并表头（多级列头）
• 合并单元格（跨行/跨列）
• 固定底部合计行（本页 / 全部）
• 行选择与批量操作
• 加载/空态

用法

@* 标记列：列直接写在 <Table> 里，单元格模板写在列里，context 即当前行 *@
<Table TItem="Order" Items="@orders">
    <Column TItem="Order" Title="编号" Field="Id" Width="140px" Sortable="true" />
    <Column TItem="Order" Title="客户" Field="Customer" Filterable="true" />
    <Column TItem="Order" Title="状态" Field="Status" Width="100px">
        <Tag Color="success" Text="@context.Status" />
    </Column>
</Table>

@* 列表版：Columns 传 TableColumn 集合，可与标记列混用 *@
<Table TItem="OrderInfo"
        Columns="@columns"
        Items="@items"
        Selectable="true"
        ScrollY="360"
        Virtual="true"
        RowHeight="40"
        OnRowClick="@OnRow"
        RowActions="@RowActions" />

@code {
    List<TableColumn> columns =>
    [
        new() { Title = "编号", Field = "Id", Width = "140px", Fixed = "left", Ellipsis = true },
        new() { Title = "客户", Field = "Customer", Filterable = true, FilterPlaceholder = "搜索客户" },
        new() { Title = "金额", Field = "Amount", Width = "120px", Sortable = true, Align = "right" },
        new() { Title = "状态", Field = "Status", Width = "100px", Header = StatusHeader, Cell = StatusCell },
    ];
}

@* 合并表头：列设置 Children 即为分组表头（父列 colspan、未分组叶子 rowspan） *@
List<TableColumn> grouped =>
[
    new() { Title = "订单信息", Children =
    [
        new() { Title = "编号", Field = "Id", Width = "150px", Sortable = true },
        new() { Title = "客户", Field = "Customer", Width = "120px" },
    ]},
    new() { Title = "状态", Field = "Status", Width = "100px" },
];

@* 合并单元格：列开启 MergeRows 相邻同值自动跨行；或用 OnCellMerge 返回 CellMerge 做任意跨行/跨列 *@
<Table TItem="Region" Columns="@mergeCols" Items="@rows" OnCellMerge="Merge" />

@code {
    List<TableColumn> mergeCols =>
    [
        new() { Title = "大区", Field = "Region", Align = "center", MergeRows = true },
        new() { Title = "城市", Field = "City", Align = "center", MergeRows = true },
        new() { Title = "门店", Field = "Store" },
        new() { Title = "销售额", Field = "Sales", Align = "right" },
    ];
    // 合计行首格横向跨越三列，被覆盖的格子由表格自动跳过
    CellMerge? Merge(TableCellContext ctx) =>
        ctx.Field == "Region" && ctx.Value?.ToString() == "合计" ? new CellMerge(1, 3) : null;
}

@* 分页 + 固定底部合计：AutoPaging 内部按全部结果分页；ShowFooter 本页合计、ShowGrandTotal 全部合计 *@
<Table TItem="OrderInfo" Columns="@columns" Items="@orders"
       ScrollY="360" ShowPagination="true" AutoPaging="true" PageSize="8" @bind-Page="@page"
       ShowFooter="true" ShowGrandTotal="true" />

API 参数

参数	类型	默认值	说明
ActionTitle	string	—	可选列标题。
ActionWidth	int	—	操作列宽度（固定右侧时的偏移基准），像素。
AutoPaging	bool	—	客户端自动分页：表格对排序/过滤后的全部结果按 Page/PageSize 内部分页，Total 自动取全部条数，跨页合计可自动计算。与外部（服务端）分页二选一。
BatchActions	RenderFragment	—	批量操作区。
Bordered	bool	—	带边框。
ChildContent	RenderFragment	—	标记列插槽：内容里放 Column 声明列，只登记、不渲染行。 不要改成 RenderFragment：列登记发生在建表头的那一刻、没有「当前行」， 传进去的上下文只能是 default，毫无意义；更关键的是 Razor 会把子内容视为带隐式 context 的模板， 与列模板的隐式 context 同名，每张带模板列的表都被迫多写一个 Context="xxx"（RZ9999）。
Columns	List<TableColumn>	—	列定义（代码版）。标记版直接把 Column 写在 里，二者可混用：列表列在前、标记列在后。 EmptyIcon string — EmptyText string — Fixed bool — 列宽固定布局（配合列宽使用）。 Footer Dictionary<string, string> — 表尾自定义内容，key 为列 Field，覆盖“本页合计”行对应单元格文本。 FooterLabel string — 合计行首列标签，默认“本页合计”。 GrandTotal Dictionary<string, string> — 服务端分页时的跨页合计，key 为列 Field、value 为显示文本；未提供且处于 AutoPaging 时由表格按全部结果自动求和。 GrandTotalLabel string — “全部合计”行首列标签，默认“全部合计”。 Items List<TItem> — 数据源。 Loading bool — 加载中。 LoadingText string — OnCellMerge Func<TableCellContext, Nullable<CellMerge>> — 自定义单元格合并：对每个单元格返回合并跨度（向下 RowSpan / 向右 ColSpan），返回 null 表示不合并。被覆盖的单元格由表格自动跳过，无需手动置 0。相邻同值自动跨行请优先用列的 MergeRows。与 Virtual 互斥（虚拟滚动下不生效）。 OnRowClick EventCallback<TItem> — 事件 行被点击。 OnSortChanged EventCallback<TableSort> — 事件 排序变化回调。 Page int — 当前页码（1 基）。 PageChanged EventCallback<int> — 事件 PageSize int — 每页条数。留默认（0）时取「系统设置 · 列表默认分页大小」；显式传入则以其为准。 PaginationLeft RenderFragment — 分页器左侧插槽内容，透传给 Pagination.LeftContent，供使用者自定义。 RowActions RenderFragment<TItem> — 行内操作区。 RowHeight int — 虚拟滚动假定行高（像素），用于计算可视窗口与占位高度。 ScrollY int — 数据区可视高度（像素）。>0 时启用滚动容器并固定表头，数据在容器内纵向滚动。 Selectable bool — 是否显示复选框列。 SelectedItems List<TItem> — 已选中的行（以 TItem 为键）。 SelectedItemsChanged EventCallback<List<TItem>> — 事件 ShowFooter bool — 表尾合计行。 ShowGrandTotal bool — 额外显示“全部合计”行（跨页聚合）。客户端 AutoPaging 时自动按全部查询结果求和；服务端分页请配合 GrandTotal 提供。 ShowPagination bool — 是否显示分页。 Striped bool — 斑马纹。 Title string — 表格标题。 Toolbar RenderFragment — 工具栏左侧内容。 ToolbarActions RenderFragment — 工具栏右侧操作。 Total int — 总条数，分页模式下必填。 Virtual bool — 开启行虚拟化：仅在 ScrollY 生效、数据量大时按可视区渲染行，其余用占位行撑高，避免整表 DOM 膨胀。 Visible bool true 取得或设置组件是否可见，默认为false。 VisibleChanged EventCallback<bool> — 事件 取得或设置组件可见性变化时的回调事件。 WrapperStyle string — 内联样式覆盖，用于去掉 wrapper 边框。 Class string null 取得或设置组件的CSS类名，用于自定义样式。 Disabled bool false 取得或设置组件是否禁用，默认为false。 Style string null 取得或设置组件的内联样式，用于自定义样式。 所有组件均继承 BaseComponent，除上表参数外还支持 Class、Style、Disabled、Visible。 扫码关注公众号 扫码加入 QQ 群