如何在MudBlazor的MudTable中切换表格列的显示与隐藏？

完全可以实现MudTable列的显示/隐藏功能，以下是两种简洁且实用的实现方式，适配你的现有代码：

方法1：条件渲染（@if 指令） #

通过布尔变量直接控制表头<MudTh>和数据行<MudTd>的渲染，逻辑直观且保证表格结构对齐：

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudTable Items="@Elements.Take(4)" Hover="true" Breakpoint="Breakpoint.Sm" Loading="@_loading" LoadingProgressColor="Color.Info">
    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        @if (!_hidePosition)
        {
            <MudTh>Position</MudTh>
        }
        <MudTh>Molar mass</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        @if (!_hidePosition)
        {
            <MudTd DataLabel="Position">@context.Position</MudTd>
        }
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
</MudTable>

<MudSwitch @bind-Checked="_hidePosition">Hide <b>position</b> column</MudSwitch>
<MudSwitch @bind-Checked="_loading">Show Loading</MudSwitch>

@code { 
    private bool _hidePosition;
    private bool _loading;
    private IEnumerable<Element> Elements = new List<Element>();

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    }
}

核心注意点：必须同时控制表头和对应数据行的渲染，避免出现表格列数不匹配的布局问题。

方法2：使用组件Visible参数 #

MudBlazor的<MudTh>和<MudTd>原生支持Visible参数，通过绑定布尔变量控制显示状态，底层通过CSS实现元素隐藏，无需额外条件判断：

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudTable Items="@Elements.Take(4)" Hover="true" Breakpoint="Breakpoint.Sm" Loading="@_loading" LoadingProgressColor="Color.Info">
    <HeaderContent>
        <MudTh>Nr</MudTh>
        <MudTh>Sign</MudTh>
        <MudTh>Name</MudTh>
        <MudTh Visible="!_hidePosition">Position</MudTh>
        <MudTh>Molar mass</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Nr">@context.Number</MudTd>
        <MudTd DataLabel="Sign">@context.Sign</MudTd>
        <MudTd DataLabel="Name">@context.Name</MudTd>
        <MudTd DataLabel="Position" Visible="!_hidePosition">@context.Position</MudTd>
        <MudTd DataLabel="Molar mass">@context.Molar</MudTd>
    </RowTemplate>
</MudTable>

<MudSwitch @bind-Checked="_hidePosition">Hide <b>position</b> column</MudSwitch>
<MudSwitch @bind-Checked="_loading">Show Loading</MudSwitch>

@code { 
    private bool _hidePosition;
    private bool _loading;
    private IEnumerable<Element> Elements = new List<Element>();

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    }
}

核心注意点：同样需要同步设置表头和数据行的Visible参数，保证表格结构一致性。

多列批量控制扩展 #

如果需要管理多列的显示状态，可以用字典统一维护：

// @code 区域添加
private Dictionary<string, bool> _columnVisibility = new()
{
    { "Position", true },
    { "MolarMass", true }
};

绑定到组件时只需替换为字典对应值：

<MudTh Visible="@_columnVisibility["Position"]">Position</MudTh>
<MudTd Visible="@_columnVisibility["Position"]" DataLabel="Position">@context.Position</MudTd>

<MudSwitch @bind-Checked="_columnVisibility["Position"]">Hide Position column</MudSwitch>

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