Blazor MudTable设置Loading=false后ServerReload仍显示加载指示器问题

问题本质 #

MudTable启用ServerData模式后，每次触发数据重载（比如调用ReloadServerData方法），组件内部会自动将Loading状态切换为true，直到ServerReload任务执行完成，这个逻辑会覆盖你手动设置的Loading="false"，这就是加载指示器依然出现的原因。

两种有效解决办法 #

办法一：手动接管加载状态控制

将MudTable的Loading属性绑定到本地变量，全程由你控制是否显示加载指示器：

1. 修改MudTable组件的Loading绑定：

<MudTable Context="queueItem" 
          ServerData="@(new Func<TableState, Task<TableData<DemoWorkQueueListItem>>>(ServerReload))" 
          Striped="true" 
          Loading="@IsTableLoading" <!-- 绑定到本地变量 -->
          Dense="true" Hover="true" FixedHeader="true" FixedFooter="true" @ref="Table">
    <!-- 其他内容保持不变 -->
</MudTable>

2. 在代码逻辑中控制变量状态：

// 本地变量，初始设为false
private bool IsTableLoading = false;

private async Task<TableData<DemoWorkQueueListItem>> ServerReload(TableState state)
{
    AppStateManager.DisableOverlay = DisableLoading;

    // 完全不需要加载指示器的话，这里不要设置IsTableLoading=true
    // 原有业务逻辑保持不变...

    // 确保最终状态为false
    IsTableLoading = false;
    return tableData;
}

protected override void OnInitialized()
{
    timer = new System.Timers.Timer
    {
        Interval = 5000                
    };

    timer.Elapsed += async (s, e) =>
    {
        if (await semaphore.WaitAsync(0))
        {
            try
            {
                DisableLoading = true;
                await Table.ReloadServerData();
            }
            finally
            {
                semaphore.Release();
            }
        }
    };

    timer.Start();
    base.OnInitialized();
}

办法二：用CSS强制隐藏加载指示器

如果全局都不需要MudTable的加载指示器，可以直接通过CSS样式隐藏：

/* 可以放到组件的<style>块或全局样式文件中 */
.mud-table-loading-overlay {
    display: none !important;
}

选择建议 #

• 若只是特定场景不需要加载指示器，优先用办法一，能灵活控制显示/隐藏；
• 若所有MudTable都不需要加载指示器，用办法二更高效。

内容的提问来源于stack exchange，提问作者99823