MudBlazor MudTable多选模式下添加独立复选框问题求助

核心问题在于事件冒泡导致额外复选框触发了默认行选择，以及MudSwitch的同步事件需要手动触发状态更新。以下是可行的实现方案：

1. 基础实现（双向绑定+阻止冒泡） #

先定义包含单行开关状态的数据模型：

public class YourModel
{
    public int Id { get; set; }
    public string Title { get; set; }
    // 用于绑定单行开关的状态字段
    public bool IsRowEnabled { get; set; }
}

在MudTable中添加自定义列，给复选框加上@onclick:stopPropagation="true"阻止事件冒泡：

<MudTable T="YourModel" 
          Items="@YourDataList" 
          MultiSelection="true" 
          @bind-SelectedItems="@BatchSelectedItems">
    <HeaderContent>
        <MudTh>单行开关</MudTh>
        <MudTh>ID</MudTh>
        <MudTh>标题</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd>
            <!-- 阻止点击事件冒泡到行，避免触发默认行选择逻辑 -->
            <MudCheckBox @bind-Checked="@context.IsRowEnabled" 
                         @onclick:stopPropagation="true">
            </MudCheckBox>
        </MudTd>
        <MudTd>@context.Id</MudTd>
        <MudTd>@context.Title</MudTd>
    </RowTemplate>
</MudTable>

@code {
    private List<YourModel> YourDataList = new()
    {
        new YourModel { Id = 1, Title = "数据1", IsRowEnabled = false },
        new YourModel { Id = 2, Title = "数据2", IsRowEnabled = true },
        new YourModel { Id = 3, Title = "数据3", IsRowEnabled = false }
    };

    private HashSet<YourModel> BatchSelectedItems = new();
}

2. MudSwitch的正确使用方式 #

如果选择用MudSwitch，同步事件需手动触发状态更新，异步事件则无需额外操作：

同步事件写法 #

<MudTd>
    <MudSwitch Checked="@context.IsRowEnabled" 
               CheckedChanged="@((val) => OnSwitchToggled(context, val))"
               @onclick:stopPropagation="true">
    </MudSwitch>
</MudTd>

@code {
    private void OnSwitchToggled(YourModel model, bool isChecked)
    {
        model.IsRowEnabled = isChecked;
        // 同步方法中手动通知Blazor更新UI
        StateHasChanged();
    }
}

异步事件写法（更省心） #

<MudTd>
    <MudSwitch Checked="@context.IsRowEnabled" 
               CheckedChanged="@((val) => OnSwitchToggledAsync(context, val))"
               @onclick:stopPropagation="true">
    </MudSwitch>
</MudTd>

@code {
    private async Task OnSwitchToggledAsync(YourModel model, bool isChecked)
    {
        model.IsRowEnabled = isChecked;
        // 异步方法无需手动调用StateHasChanged，Blazor自动处理状态更新
        await Task.CompletedTask;
        // 如有异步业务逻辑（比如接口请求）可直接写在此处
    }
}

关键注意事项 #

• @onclick:stopPropagation="true"是解决行选择误触发的核心：它会阻止复选框/开关的点击事件向上冒泡到行元素，彻底隔离自定义开关和默认行选择逻辑。
• 若不需要双向绑定，直接通过事件处理逻辑修改业务状态即可，无需绑定模型字段。
• 保留MudTable的MultiSelection="true"即可继续使用默认的批量选择复选框。

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