如何在MudDataGrid的元素名称列添加超链接或按钮？

要给MudDataGrid的Name列添加超链接或按钮，只需利用<Column>的CellTemplate自定义列内容即可，以下是两种具体实现方式：

1. 添加超链接 #

使用MudLink组件实现可点击的跳转链接，支持外部URL或Blazor内部路由：

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

<MudDataGrid Items="@Elements.Take(4)">
    <Columns>
        <Column T="Element" Field="Number" Title="Nr" />
        <Column T="Element" Field="Sign" />
        <Column T="Element" Title="Name">
            <CellTemplate>
                <!-- 外部URL示例 -->
                <MudLink Href="https://example.com/elements/@context.Item.Name" Target="_blank">
                    @context.Item.Name
                </MudLink>
                <!-- 内部路由示例（适配Blazor路由场景） -->
                <!-- <MudLink Href="/element-details/@context.Item.Number">@context.Item.Name</MudLink> -->
            </CellTemplate>
        </Column>
        <Column T="Element" Field="Position" />
        <Column T="Element" Field="Molar" Title="Molar mass" />
    </Columns>
</MudDataGrid>

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

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

2. 添加交互按钮 #

使用MudButton组件实现可触发逻辑的按钮，绑定点击事件处理函数：

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

<MudDataGrid Items="@Elements.Take(4)">
    <Columns>
        <Column T="Element" Field="Number" Title="Nr" />
        <Column T="Element" Field="Sign" />
        <Column T="Element" Title="Name">
            <CellTemplate>
                <MudButton Variant="Variant.Text" OnClick="@(() => HandleElementSelect(context.Item))">
                    @context.Item.Name
                </MudButton>
            </CellTemplate>
        </Column>
        <Column T="Element" Field="Position" />
        <Column T="Element" Field="Molar" Title="Molar mass" />
    </Columns>
</MudDataGrid>

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

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

    private void HandleElementSelect(Element element)
    {
        // 这里添加按钮点击后的业务逻辑，比如弹窗展示详情、导航至详情页等
        Console.WriteLine($"选中元素：{element.Name}（原子序数：{element.Number}）");
    }
}

核心说明 #

• CellTemplate是自定义列内容的核心，context.Item代表当前行对应的Element数据对象。
• 可根据需求选择MudLink（侧重跳转场景）或MudButton（侧重交互逻辑），也可结合其他MudBlazor组件实现更复杂的UI效果。

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