Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

表头分组功能

数据结构比较复杂的时候,可使用多级表头来展现数据的层次关系

基础用法

设置 MultiHeaderTemplate 模板即可

Demo
Loading...
@page "/tables/multi-header"

<h3>表头分组功能</h3>

<h4>数据结构比较复杂的时候,可使用多级表头来展现数据的层次关系</h4>

<Block Title="基础用法" Introduction="设置 <code>MultiHeaderTemplate</code> 模板即可">
    <Table TItem="Foo" Items="@Items.Take(4)" IsBordered="true" IsStriped="true">
        <MultiHeaderTemplate>
            <tr>
                <th rowspan="2"><div class="table-cell" style="height: 94px; justify-content: center;">时间</div></th>
                <th colspan="2"><div class="table-cell" style="justify-content: center">个人信息</div></th>
            </tr>
            <tr>
                <th><div class="table-cell">姓名</div></th>
                <th><div class="table-cell">地址</div></th>
            </tr>
        </MultiHeaderTemplate>
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</Block>
根据相关法律政策,该内容无法显示

B 站相关视频链接

[传送门]

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload