已加载数据的MudTable为何Items属性仍为null？

原因 #

在ServerData模式下，MudBlazor的MudTable组件不会将服务端返回的TableData.Items赋值给组件自身的Items属性。这个Items属性是为客户端模式（直接绑定Items数据源）设计的，服务端分页场景下组件内部用私有状态管理当前页数据，不会对外暴露到Items属性中，所以你通过@_table.Items访问会得到null。

解决方法 #

方法1：维护本地当前页数据集合 #

在组件类中声明本地变量存储当前页数据：

private List<InvoiceVm> _currentPageItems = new();

在GetServerData方法中更新该变量：

private async Task<TableData<InvoiceVm>> GetServerData(TableState state)
{
    // 原有接口请求逻辑
    var response = await YourDataApiCall();
    // 更新本地集合
    _currentPageItems = response.Data.ToList();
    return new TableData<InvoiceVm>() { Items = response.Data, TotalItems = response.MetaData.TotalCount };
}

最后在Footer中使用本地集合计算当前页费用总和：

<FooterContent>
    <MudTd colspan="6"><strong>Total expenses :</strong> @_currentPageItems.Sum(e => e.InvoiceDetails.Sum(x => x.ProductPrice * x.Quantity))</MudTd>
</FooterContent>

方法2：获取全量总费用（推荐） #

如果需要的是所有数据的总费用而非当前页，仅计算当前页数据无业务意义。此时应让后端接口在返回的元数据中包含总费用统计值（比如给MetaData增加TotalExpenses字段），再直接使用该值：

// 假设后端返回的MetaData已包含TotalExpenses属性
private decimal _totalExpenses;

private async Task<TableData<InvoiceVm>> GetServerData(TableState state)
{
    var response = await YourDataApiCall();
    _totalExpenses = response.MetaData.TotalExpenses;
    return new TableData<InvoiceVm>() { Items = response.Data, TotalItems = response.MetaData.TotalCount };
}

页面中直接展示全量总费用：

<FooterContent>
    <MudTd colspan="6"><strong>Total expenses :</strong> @_totalExpenses</MudTd>
</FooterContent>

内容的提问来源于stack exchange，提问作者hanushi-thana