如何替换MudBlazor Table中的默认复选框图标？

问题描述 #

我正在使用MudBlazor Table组件，希望替换其默认的CheckBox。当将MultiSelection属性设置为true时，表格会显示复选框，当前的实现代码如下：

<MudTable Dense="true" Hover="true" Bordered="true" MultiSelection="true" Items="@Elements" FixedHeader="true" Striped="true" HeaderClass="table-head-bordered" FooterClass="table-foot-bordered">
    <ToolBarContent>
        <MudSpacer />
        <MudTablePager PageSizeOptions="new int[]{5,10,25,50,100}" />
    </ToolBarContent>
    <HeaderContent>
        <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Number)">Nr</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Sign)">Sign</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<Element, object>(x=>x.Name)">Name</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Position)">Position</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.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>
    <PagerContent>
        <MudTablePager PageSizeOptions="new int[]{5,10,25,50,100}" />
    </PagerContent>
</MudTable>

当前复选框显示效果：

实现步骤 #

要替换默认复选框，需手动实现全选和行选逻辑，完全控制复选框的样式与行为：

1. 关闭自动生成的选择列

将原Table组件的MultiSelection属性改为false，避免自动渲染默认复选框列。

2. 自定义表头全选复选框

在<HeaderContent>最前端添加自定义列，放置用于全选的MudCheckBox，并绑定全选逻辑：

<MudTh>
    <MudCheckBox @bind-Checked="@SelectAll" Color="Color.Primary" />
</MudTh>

对应的C#逻辑：

private HashSet<Element> SelectedElements { get; set; } = new();

private bool SelectAll
{
    get => Elements.All(x => SelectedElements.Contains(x));
    set
    {
        SelectedElements = value ? new HashSet<Element>(Elements) : new HashSet<Element>();
        StateHasChanged();
    }
}

3. 自定义行内复选框

在<RowTemplate>最前端添加列，放置行级MudCheckBox，绑定当前行数据的选中状态：

<MudTd>
    <MudCheckBox @bind-Checked="@SelectedElements.Contains(context)" 
                 CheckedChanged="(val) => OnRowChecked(val, context)" 
                 Color="Color.Primary" />
</MudTd>

对应的C#处理方法：

private void OnRowChecked(bool value, Element element)
{
    if (value)
        SelectedElements.Add(element);
    else
        SelectedElements.Remove(element);
    StateHasChanged();
}

完整示例代码 #

整合后的完整Table代码及后台逻辑如下：

前端代码

<MudTable Dense="true" Hover="true" Bordered="true" MultiSelection="false" Items="@Elements" FixedHeader="true" Striped="true" HeaderClass="table-head-bordered" FooterClass="table-foot-bordered">
    <ToolBarContent>
        <MudSpacer />
        <MudTablePager PageSizeOptions="new int[]{5,10,25,50,100}" />
    </ToolBarContent>
    <HeaderContent>
        <MudTh>
            <MudCheckBox @bind-Checked="@SelectAll" Color="Color.Primary" />
        </MudTh>
        <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Number)">Nr</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Sign)">Sign</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<Element, object>(x=>x.Name)">Name</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Position)">Position</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortBy="new Func<Element, object>(x=>x.Molar)">Mass</MudTableSortLabel></MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd>
            <MudCheckBox @bind-Checked="@SelectedElements.Contains(context)" 
                         CheckedChanged="(val) => OnRowChecked(val, context)" 
                         Color="Color.Primary" />
        </MudTd>
        <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>
    <PagerContent>
        <MudTablePager PageSizeOptions="new int[]{5,10,25,50,100}" />
    </PagerContent>
</MudTable>

后台逻辑（C#）

// 元素模型定义
public class Element
{
    public int Number { get; set; }
    public string Sign { get; set; }
    public string Name { get; set; }
    public int Position { get; set; }
    public string Molar { get; set; }
}

private List<Element> Elements { get; set; } = new();
private HashSet<Element> SelectedElements { get; set; } = new();

private bool SelectAll
{
    get => Elements.All(x => SelectedElements.Contains(x));
    set
    {
        SelectedElements = value ? new HashSet<Element>(Elements) : new HashSet<Element>();
        StateHasChanged();
    }
}

private void OnRowChecked(bool value, Element element)
{
    if (value)
        SelectedElements.Add(element);
    else
        SelectedElements.Remove(element);
    StateHasChanged();
}

// 初始化示例数据
protected override void OnInitialized()
{
    Elements = new List<Element>
    {
        new() { Number = 1, Sign = "H", Name = "Hydrogen", Position = 1, Molar = "1.008" },
        new() { Number = 2, Sign = "He", Name = "Helium", Position = 1, Molar = "4.0026" },
        new() { Number = 3, Sign = "Li", Name = "Lithium", Position = 2, Molar = "6.94" }
        // 可添加更多元素数据
    };
}

自定义说明 #

• 可通过修改MudCheckBox的Color、Size、Variant等属性，调整复选框样式
• 全选与行选逻辑已完全绑定，可直接复用或按需扩展

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