MudBlazor表格点击行回调时选中行样式失效求助

核心问题分析 #

你的问题源于选中状态逻辑冲突：同时使用@bind-SelectedItem绑定的selectedItem1和自定义的selectedRowNumber控制行样式，加上回调触发时的跨组件状态更新，导致MudTable的选中状态与样式渲染不同步。

具体修复步骤 #

1. 移除冗余的selectedRowNumber状态：完全依赖@bind-SelectedItem的selectedItem1跟踪选中项，避免双状态同步问题。
2. 简化SelectedRowClassFunc逻辑：直接通过当前元素与selectedItem1的对比返回样式类，不再依赖mudTable.SelectedItem或行号。
3. 调整RowClickEvent执行顺序：先更新本地选中状态，再触发父组件回调，确保状态同步后再通知外部。

修改后的关键代码 #

样式部分（保持不变）

<style>
    .selected {
        background-color: #1E88E5 !important;
    }
    .selected > td {
        color: white !important;
    }
    .selected > td .mud-input {
        color: white !important;
    }
</style>

MudTable组件（保持原有结构，保留@bind-SelectedItem="selectedItem1"）

<MudTable T="DriveFile" Items="@Elements" Dense="false" Hover="true" Bordered="false" Striped="true" FixedHeader="true"
          FixedFooter="true" RowClass="cursor-pointer"  Breakpoint="Breakpoint.Sm"
          OnRowClick="RowClickEvent"
          Filter="new Func<DriveFile, bool>(FilterFunc1)"
          RowClassFunc="@SelectedRowClassFunc"
          @bind-SelectedItem="selectedItem1"
          @ref="mudTable">
    <!-- 其余ToolBarContent、HeaderContent、RowTemplate内容不变 -->
</MudTable>

@code部分修改

@code {
    [Parameter]
    public EventCallback<Guid> OnDriveFileSelected { get; set; } 
    
    [Parameter]
    public string FolderOrLabelToRetrieve { get; set; }
    
    private DriveFile selectedItem1 = null;
    private string searchString1 = "";
    private bool FilterFunc1(DriveFile _DriveFile) => FilterFunc(_DriveFile, searchString1);

    private bool FilterFunc(DriveFile _DriveFile, string searchString)
    {
        if (string.IsNullOrWhiteSpace(searchString)) return true;
        if (_DriveFile.FileName.Contains(searchString, StringComparison.OrdinalIgnoreCase))
            return true;
        return false;
    }
    
    private MudTable<DriveFile> mudTable;
    private List<string> clickedEvents = new();
    private IEnumerable<DriveFile> Elements;

    protected override Task OnInitializedAsync()
    {
        Elements = DatabaseAbstractionLayer.GetLabelOrFolderDriveFiles("Files").ToList();
        return base.OnInitializedAsync();
    }

    private async Task RowClickEvent(TableRowClickEventArgs<DriveFile> args)
    {
        // 先更新本地选中状态
        if (selectedItem1 != args.Item)
        {
            selectedItem1 = args.Item;
            clickedEvents.Add($"Selected Row: {Elements.ToList().IndexOf(args.Item)}");
        }
        else
        {
            selectedItem1 = null;
            clickedEvents.Add("Selected Row: None");
        }
        
        // 触发父组件回调
        if (OnDriveFileSelected.HasDelegate && args.Item != null)
        {
            await OnDriveFileSelected.InvokeAsync(args.Item.Id);
        }
    }

    // 简化样式判断逻辑，直接依赖selectedItem1
    private string SelectedRowClassFunc(DriveFile element, int rowNumber)
    {
        return selectedItem1 != null && selectedItem1.Equals(element) ? "selected" : string.Empty;
    }
}

修复原理 #

• 移除selectedRowNumber后，避免了手动维护行号与选中项的同步问题，完全依赖MudTable的内置选中状态绑定，确保状态唯一且可靠。
• SelectedRowClassFunc直接对比当前元素和selectedItem1，每次渲染时都能准确判断选中行，不会出现状态不同步的情况。
• 调整RowClickEvent为异步方法，先更新本地状态再触发回调，确保组件状态同步后再通知父组件，避免跨组件更新导致的渲染时序问题。

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