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

Table 表格

通过设置 `ShowExportButton` 设置显示导出按钮，组件内置导出Excel功能

导出功能提供了导出回调方法 OnExportAsync 使用时可以通过提供自定义的导出方法进行数据导出，如果未提供数据导出方法，组件会根据注入的导出服务进行数据导出

注意事项：

BootstrapBlazor.TableExport，组件包使用 EPPlus 组件提供了导出到 Excel 功能，如果需要可以引用其组件包

Nuget 包安装

使用 nuget.org 进行 BootstrapBlazor.TableExport 组件的安装

.NET CLI

dotnet add package BootstrapBlazor.TableExport --version 5.0.4

PackageReference

<PackageReference Include="BootstrapBlazor.TableExport" Version="5.0.4" />

Package Manager

Install-Package BootstrapBlazor.TableExport -Version 5.0.4

注入服务：

public void ConfigureServices(IServiceCollection services)
{
    // 增加 BootstrapBlazor 组件
    services.AddBootstrapBlazor();

    // 增加 Table Excel 导出服务
    services.AddBootstrapBlazorTableExcelExport();
}

JS 文件

<script src="_content/BootstrapBlazor.TableExport/js/export.min.js"></script>

表格导出功能

通过设置 ShowExportButton 属性是否显示导出按钮，默认为false

Demo

<Table TItem="BindItem"
       IsPagination="true" PageItemsSource="@PageItemsSource"
       IsStriped="true" IsBordered="true" IsMultipleSelect="true"
       ShowToolbar="false" ShowExportButton="true"
       OnQueryAsync="@OnQueryAsync">
    <TableColumns>
        <TableColumn @bind-Field="@context.DateTime" Width="180" />
        <TableColumn @bind-Field="@context.Name" Width="100" />
        <TableColumn @bind-Field="@context.Address" />
        <TableColumn @bind-Field="@context.Count" />
    </TableColumns>
</Table>

自定义导出方法

通过设置 OnExportAsync 回调委托方法可自定义导出方法，不设置将使用组件内置导出函数

Demo

<Table TItem="BindItem"
       IsPagination="true" PageItemsSource="@PageItemsSource"
       IsStriped="true" IsBordered="true" IsMultipleSelect="true"
       ShowToolbar="false" ShowExportButton="true"
       OnExportAsync="ExportAsync" OnQueryAsync="@OnQueryAsync">
    <TableColumns>
        <TableColumn @bind-Field="@context.DateTime" Width="180" />
        <TableColumn @bind-Field="@context.Name" Width="100" />
        <TableColumn @bind-Field="@context.Address" />
        <TableColumn @bind-Field="@context.Count" />
    </TableColumns>
</Table>

Table 表格

通过设置 ShowExportButton 设置显示导出按钮，组件内置导出Excel功能

JS 文件

表格导出功能

Demo

自定义导出方法

Demo

通过设置 `ShowExportButton` 设置显示导出按钮，组件内置导出Excel功能