BootstrapBlazor组件库,Table组件导出选中行数据

发布时间 2023-09-22 16:29:48作者: 代码搬运工lee

BootstrapBlazor组件库,Table组件导出选中行数据

问题描述

有很多小伙伴在使用BootstrapBlazor组件库的Table组件导出功能时,不知道怎么导出选中的行数据。

img

解决方案

通过SelectedRows来导出选中的行数据。

Razor代码

<Table TItem="Foo" IsPagination="true" PageItemsSource="PageItemsSource" class="table-demo"
       IsStriped="true" IsBordered="true" ShowSkeleton="true" IsMultipleSelect="true"
       ShowToolbar="true" ShowSearch="true" ShowExtendButtons="true" ShowExportButton="true"
       SelectedRows="@SelectRows"
       OnExportAsync="OnExportAsync"
       AutoGenerateColumns="true"
       EditMode="EditMode.Popup">
    <TableColumns>
        <TableColumn @bind-Field="@context.Hobby" Items="GetHobbys(context)" />
    </TableColumns>
</Table>

C#代码

[Inject]
[NotNull]
private ITableExcelExport? Exporter { get; set; }

private List<Foo> SelectRows { get; set; } = new List<Foo>();

private async Task<bool> OnExportAsync(ITableExportDataContext<Foo> context)
{
    return await Exporter.ExportAsync(SelectRows, context.Columns, "Test.xlsx");
}

实现效果

img

注意事项

Table组件的导出功能需要安装独立功能包。