You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

MudTable初始渲染时Loading属性失效问题求助

问题:MudTable首次加载时Export按钮未正确禁用

当MudTable通过ServerData方法加载数据时,Export按钮的预期逻辑是:表格加载时禁用,加载完成后启用。该逻辑在后续手动触发重新加载时正常工作,但首次页面加载时,尽管表格处于加载状态(显示LoadingContent),Export按钮仍保持启用状态。已尝试过类似问题的解决方案,但未解决。

示例代码

@using System.Text.Json.Serialization
@using System.Threading

<MudButton Disabled="@(_table is null || _table is not null && _table.Loading)" StartIcon="@Icons.Material.Outlined.Download">Export</MudButton>
<MudButton OnClick="@ReloadServerData">Reload</MudButton>

<MudTable T="Element" @ref="_table" ServerData="ServerReload" Dense="true" Hover="true">
    <ToolBarContent>
        <MudText Typo="Typo.h6">Periodic Elements</MudText>
    </ToolBarContent>
    <HeaderContent>
        <MudTh>
            <MudTableSortLabel SortLabel="nr_field" T="Element">Nr</MudTableSortLabel>
        </MudTh>
        <MudTh>
            <MudTableSortLabel SortLabel="sign_field" T="Element">Sign</MudTableSortLabel>
        </MudTh>
        <MudTh>
            <MudTableSortLabel SortLabel="name_field" T="Element">Name</MudTableSortLabel>
        </MudTh>
        <MudTh>
            <MudTableSortLabel SortLabel="position_field" T="Element">Position</MudTableSortLabel>
        </MudTh>
        <MudTh>
            <MudTableSortLabel SortLabel="mass_field" T="Element">Molar mass</MudTableSortLabel>
        </MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Position">@context.Position</MudTd>
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
    <NoRecordsContent>
        <MudText>No matching records found</MudText>
    </NoRecordsContent>
    <LoadingContent>
        <MudText>Loading...</MudText>
    </LoadingContent>
    <PagerContent>
        <MudTablePager/>
    </PagerContent>
</MudTable>

@code {
    #nullable enable
    private MudTable<Element>? _table;

    private async Task<TableData<Element>> ServerReload(TableState state, CancellationToken token)
    {
        // Forward the provided token to methods which support it
        List<Element> data = [];
        // Simulate a long-running operation
        await Task.Delay(2300, token);
        // Get the total count
        var totalItems = data.Count;
        // Get the paged data
        var pagedData = data.Skip(state.Page * state.PageSize).Take(state.PageSize).ToList();
        // Return the data
        return new TableData<Element> {TotalItems = totalItems, Items = pagedData};
    }

    private Task ReloadServerData() => _table is null ? Task.CompletedTask : _table.ReloadServerData();

    protected override void OnAfterRender(bool firstRender)
    {
        if (_table is not null)
        {
            var count = _table.TotalItems;
        }
    }

    public class Element
    {
        public string? Group { get; set; }

        public int Position { get; set; }

        public string? Name { get; set; }

        public int Number { get; set; }

        [JsonPropertyName("small")] public string? Sign { get; set; }

        public double Molar { get; set; }

        public IReadOnlyCollection<int>? Electrons { get; set; }

        /// <summary>
        /// Overriding Equals is essential for use with Select and Table because they use HashSets internally
        /// </summary>
        public override bool Equals(object? obj) => Equals(GetHashCode(), obj?.GetHashCode());

        /// <summary>
        /// Overriding GetHashCode is essential for use with Select and Table because they use HashSets internally
        /// </summary>
        public override int GetHashCode() => Name?.GetHashCode() ?? 0;

        public override string ToString() => $"{Sign} - {Name}";
    }
}

内容的提问来源于stack exchange,提问作者Pete

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.17 10:28:15