MudBlazor DataGrid：TemplateColumn与行内编辑兼容及行触发编辑失效问题

问题根源 #

• 开启DataGridEditMode.Cell后，MudBlazor会自动把TemplateColumn的显示内容替换成编辑组件，你之前设置的自定义颜色等样式自然就丢失了。
• DataGridEditTrigger.OnRowClick是用来触发整行编辑的，但Cell模式是单个单元格编辑，所以直接设置这个属性根本没用。

解决办法 #

1. 给TemplateColumn分别配置显示模板和编辑模板 #

在TemplateColumn里同时用CellTemplate（非编辑状态的UI）和EditTemplate（编辑状态的UI），这样既能保留你的自定义样式，又能正常进行单元格编辑。

示例代码：

<MudDataGrid T="Employee" Items="@employees" EditMode="DataGridEditMode.Cell" @ref="dataGrid">
    <Columns>
        <MudDataGridColumn T="Employee" Property="Name" Title="姓名" />
        <MudTemplateColumn T="Employee" Title="状态">
            <!-- 非编辑状态的显示模板，这里设置自定义颜色 -->
            <CellTemplate>
                <MudText Style="@GetStatusColor(context.Item)">@context.Item.Status</MudText>
            </CellTemplate>
            <!-- 编辑状态的模板，放编辑用的组件 -->
            <EditTemplate>
                <MudSelect @bind-Value="context.Item.Status" Class="w-full">
                    <MudSelectItem Value="Active">活跃</MudSelectItem>
                    <MudSelectItem Value="Inactive">非活跃</MudSelectItem>
                </MudSelect>
            </EditTemplate>
        </MudTemplateColumn>
    </Columns>
</MudDataGrid>

@code {
    private MudDataGrid<Employee> dataGrid;
    private List<Employee> employees = new List<Employee>
    {
        new Employee { Name = "张三", Status = "Active" },
        new Employee { Name = "李四", Status = "Inactive" }
    };

    // 根据状态返回自定义颜色样式
    private string GetStatusColor(string status)
    {
        return status == "Active" ? "color: green;" : "color: red;";
    }

    public class Employee
    {
        public string Name { get; set; }
        public string Status { get; set; }
    }
}

2. 点击行触发指定单元格编辑的正确方式 #

直接设置DataGridEditTrigger.OnRowClick无效，得手动监听行点击事件，调用DataGrid的BeginEditAsync方法指定要编辑的单元格：

修改DataGrid添加RowClick事件：

<MudDataGrid T="Employee" Items="@employees" EditMode="DataGridEditMode.Cell" @ref="dataGrid" RowClick="OnRowClick">
    <!-- 列定义和之前一样 -->
</MudDataGrid>

@code {
    // ... 其他代码不变

    private async Task OnRowClick(DataGridRowClickEventArgs<Employee> args)
    {
        // 找到要编辑的列（这里以"状态"列为例）
        var targetColumn = dataGrid.Columns.First(c => c.Title == "状态");
        // 触发该单元格的编辑
        await dataGrid.BeginEditAsync(args.Item, targetColumn);
    }
}

关键提醒 #

• CellTemplate只管非编辑状态的渲染，你可以在这里随便加样式、自定义布局。
• EditTemplate负责编辑状态的组件，确保编辑功能正常运行。
• 通过@ref获取DataGrid实例，才能在点击事件里手动控制编辑的单元格。

内容的提问来源于Stack Exchange，提问作者Homer