BootstrapBlazor组件库，Table组件外部刷新数据

BootstrapBlazor组件库，Table组件外部刷新数据

问题描述

有很多小伙伴在使用BootstrapBlazor组件库的Table组件时，经常会遇到外部调用OnQueryAsync的需求。

解决方案

我们可以使用@ref指令，将当前Table对象引用到一个变量上面。

Razor代码

注意@ref指令要写@符号

<Button @onclick="Query" Text="查询数据" IsAsync="true" />

<Table @ref=@TestTable TItem="DataList" OnQueryAsync="@OnQueryAsync">
    <TableColumns>
        <TableColumn @bind-Field="@context.日期" />
        <TableColumn @bind-Field="@context.编号" />
        <TableColumn @bind-Field="@context.等级" />
        <TableColumn @bind-Field="@context.规格" />
    </TableColumns>
</Table>

C#代码

注意<>内的类型和TItem一致

private Table<DataList>? TestTable;

private async Task Query()
{
    //通过下面的代码在外部调用Table的QueryAsync刷新数据。
    await TestTable.QueryAsync();
}

private async Task<QueryData<DataList>> OnQueryAsync(QueryPageOptions options)
{
    var Items = await tz.GetDatasAsync(Options);
    return new QueryData<DataList>()
    {
        Items = Items
    };
}

注意事项

Table组件的Items和OnQueryAsync只能二选一，不能混用！本方案仅适合OnQuery模式，Items模式请调用StateHasChanged。