Bootstrap Blazor - 一套企业级 UI 组件库

Table 合计功能

用于数据统计

数据统计示例

设置 ShowFooter=true 显示 Footer 自定义合计功能

Demo

Table 组件有 TableFooter 模板，其数据上下文为 Table 组件的数据集合 IEnumerable<TItem>

TableFooter 模板中关联的上下文 context 值为当页数据

TableFooter 模板内可以自定义单元格 td 内容，也可以使用内置的 TableFooterCell 组件进行数据显示

<Table TItem="BindItem" ShowFooter="true"
        IsPagination="true" PageItemsSource="@PageItemsSource" OnQueryAsync="@OnQueryAsync">
    <TableColumns>
        <TableColumn @bind-Field="@context.DateTime" />
        <TableColumn @bind-Field="@context.Name" />
        <TableColumn @bind-Field="@context.Address" />
        <TableColumn @bind-Field="@context.Count" />
    </TableColumns>
    <TableFooter>
        <TableFooterCell colspan="3" Text="合计：" />
        <TableFooterCell Text="@context.Sum(i => i.Count).ToString()" />
    </TableFooter>
</Table>