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

Table 换行示例

当表头或者行内单元格内容超长时，通过样式更改实现省略、换行等效果

注意：由于 Table 组件已实现适配移动端功能，此演示需在电脑端查看

表头超长示例

在某种特殊情况下可能表头比较长，需要将表头控制在一个固定宽度内，鼠标移动到表头上时显示 Tooltip 来显示完整表头信息

Demo

可以拖动窗口大小，窗口过小时自动出现横向滚动条

<div class="table-wrap-header-demo">
    <Table TItem="BindItem" IsBordered="true" IsStriped="true" Items="@Items.Take(4)">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Text="我是超级长的时间表头" />
            <TableColumn @bind-Field="@context.Name" Text="我是超级长的姓名表头" />
            <TableColumn @bind-Field="@context.Address" Text="我是超级长的地址表头" />
        </TableColumns>
    </Table>
</div>

<style>
    .table-wrap-header-demo .table th .table-cell span {
        max-width: 120px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

单元格数据超长折行示例

在某种特殊情况下可能单元格内容比较长，需要进行折行处理

Demo

可以拖动窗口大小，窗口过小时地址列自动进行折行处理
通过设置 AllowTextWrap 来开启自动换行功能
注意：推荐使用 Width 对列宽度进行设置

<Table TItem="BindItem" IsBordered="true" IsStriped="true" Items="@CellItems">
    <TableColumns>
        <TableColumn @bind-Field="@context.DateTime" Width="180" Text="时间" />
        <TableColumn @bind-Field="@context.Name" Text="姓名" />
        <TableColumn @bind-Field="@context.Address" Text="地址" Width="200" AllowTextWrap="true" />
        <TableColumn @bind-Field="@context.Education" />
        <TableColumn @bind-Field="@context.Count" />
        <TableColumn @bind-Field="@context.Complete">
            <Template Context="v">
                <Switch IsDisabled="true" Value="v.Value" ShowInnerText="true" OnInnerText="是" OffInnerText="否" />
            </Template>
        </TableColumn>
    </TableColumns>
</Table>

单元格数据超长省略示例

在某种特殊情况下可能单元格内容比较长，需要进行省略处理

Demo

可以拖动窗口大小，窗口过小时地址列自动进行省略处理
通过设置 TextEllipsis 来开启文本超长省略功能
注意：推荐使用 Width 对列宽度进行设置，如未设置列宽内部自动使用 200px 宽度
单元格内文本被省略后，可以通过 ShowTips 属性来控制鼠标悬停是否显示全部文本，默认为 false
拖动地址列，单元格显示内容自动增加与减少

<Table TItem="BindItem" IsBordered="true" IsStriped="true" Items="@CellItems">
    <TableColumns>
        <TableColumn @bind-Field="@context.DateTime" Width="180" Text="时间" />
        <TableColumn @bind-Field="@context.Name" Text="姓名" />
        <TableColumn @bind-Field="@context.Address" Text="地址" Width="200" TextEllipsis="true" />
        <TableColumn @bind-Field="@context.Education" />
        <TableColumn @bind-Field="@context.Count" />
        <TableColumn @bind-Field="@context.Complete">
            <Template Context="v">
                <Switch IsDisabled="true" Value="v.Value" ShowInnerText="true" OnInnerText="是" OffInnerText="否" />
            </Template>
        </TableColumn>
    </TableColumns>
</Table>