You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在MudDataGrid中根据行上下文控制编辑按钮显示?

解决MudDataGrid特定行隐藏编辑按钮的问题

核心解决方案

你遇到的问题是因为context变量仅在MudDataGrid的内部模板(如CellTemplate、EditCommandTemplate)中可用,直接在Column标签的属性绑定里访问@context会超出上下文范围。下面分场景给出可行实现:

1. 仅隐藏编辑按钮,保留其他操作按钮

如果需要保留删除、查看等按钮,只隐藏编辑按钮,直接在EditCommandTemplate内部通过context.Item.IsReadOnly控制按钮的Hidden属性即可:

<MudDataGrid T="TagRowData" EditMode="DataGridEditMode.Cell">
    <!-- 其他数据列 -->
    <CommandColumn Title="操作">
        <EditCommandTemplate>
            <!-- 仅当IsReadOnly为false时显示编辑按钮 -->
            <MudButton Icon="@Icons.Material.Filled.Edit" 
                       Size="Size.Small" 
                       Hidden="@context.Item.IsReadOnly"
                       OnClick="@context.StartEdit">编辑</MudButton>
        </EditCommandTemplate>
        <DeleteCommandTemplate>
            <MudButton Icon="@Icons.Material.Filled.Delete" 
                       Size="Size.Small"
                       OnClick="@context.DeleteItem">删除</MudButton>
        </DeleteCommandTemplate>
    </CommandColumn>
</MudDataGrid>

2. 隐藏整行的操作列

如果需要完全隐藏只读行的操作列,使用CommandColumn的VisibleFunc属性,传入判断委托:

<MudDataGrid T="TagRowData" EditMode="DataGridEditMode.Cell">
    <!-- 其他数据列 -->
    <CommandColumn Title="操作" VisibleFunc="@ShowOperations">
        <EditCommandTemplate>
            <MudButton Icon="@Icons.Material.Filled.Edit" Size="Size.Small" OnClick="@context.StartEdit">编辑</MudButton>
        </EditCommandTemplate>
    </CommandColumn>
</MudDataGrid>

对应的后台C#代码:

// 判断是否显示操作列:仅非只读行显示
private bool ShowOperations(TagRowData item) => !item.IsReadOnly;

3. 自定义TemplateColumn实现操作列

如果用自定义TemplateColumn做操作列,需要在CellTemplate内部访问context.Item,同时通过@ref获取DataGrid实例触发编辑操作:

<MudDataGrid T="TagRowData" EditMode="DataGridEditMode.Cell" @ref="DataGrid">
    <!-- 其他数据列 -->
    <TemplateColumn Title="操作">
        <CellTemplate>
            <MudButton Icon="@Icons.Material.Filled.Edit" 
                       Size="Size.Small" 
                       Hidden="@context.Item.IsReadOnly"
                       OnClick="@(() => DataGrid.StartEditAsync(context.Item))">编辑</MudButton>
        </CellTemplate>
    </TemplateColumn>
</MudDataGrid>

后台代码添加DataGrid引用:

private MudDataGrid<TagRowData> DataGrid { get; set; }

context变量的可用范围

MudDataGrid的context变量仅在行级/单元格级的内部模板中可用,不同模板的context类型不同:

  • CellTemplate/EditTemplate:context为CellContext<T>,可通过context.Item获取当前行实体,还包含列信息、编辑状态等
  • 命令模板(EditCommandTemplate/DeleteCommandTemplate):context为CommandContext<T>,除了context.Item,还提供StartEdit、DeleteItem等内置操作方法
  • 注意:Column标签的顶层属性(如Hidden、Width)不属于模板上下文,无法直接访问context,必须通过模板内部绑定或VisibleFunc这类委托属性实现行级控制。

内容的提问来源于stack exchange,提问作者jokarl

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.12 23:15:24