如何为启用内联编辑的MudTable新增可编辑空白行

新增行不显示、不进入编辑态的核心原因有两点：

1. 普通List<T>未实现集合变更通知接口，直接调用Add()修改原集合实例时，MudTable无法感知数据源变化，不会触发UI重渲染。
2. 手动给实体定义Editing属性控制编辑状态的逻辑和MudTable内联编辑的内置逻辑不兼容：MudTable内部自行维护当前编辑行的上下文，不会识别自定义的编辑状态标记，即便行被渲染也不会加载编辑输入框模板。

按以下步骤调整即可实现点击新增按钮自动生成空白编辑行的效果：

• 数据源优先替换为ObservableCollection<T>，它自带集合变更通知能力，增删元素后UI会自动更新；如果坚持用普通List<T>，每次修改集合后必须重新赋值为新的集合实例，触发组件变更检测。
• 通过@ref获取MudTable组件实例，使用组件自带的SetEditingItem()方法控制行进入编辑状态，不要自行维护实体的编辑状态属性。
• 分别配置RowTemplate（普通只读行模板）和RowEditingTemplate（编辑状态行模板），编辑态下的输入框直接绑定行上下文的实体属性。

完整代码示例 #

Razor组件部分：

<MudTable @ref="_publisherTable" Items="@AdminPublishers" Hover="true" Bordered="true" Dense="true">
    <ToolBarContent>
        <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="CreateNewPublisher">
            新增出版社
        </MudButton>
    </ToolBarContent>
    <HeaderContent>
        <MudTh>出版社名称</MudTh>
        <MudTh>联系地址</MudTh>
        <MudTh>操作</MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd>@context.Name</MudTd>
        <MudTd>@context.Address</MudTd>
        <MudTd>
            <MudIconButton Icon="@Icons.Material.Filled.Edit" OnClick="@(() => _publisherTable.SetEditingItem(context))" />
        </MudTd>
    </RowTemplate>
    <RowEditingTemplate>
        <MudTd><MudTextField @bind-Value="@context.Name" Placeholder="请输入出版社名称" /></MudTd>
        <MudTd><MudTextField @bind-Value="@context.Address" Placeholder="请输入联系地址" /></MudTd>
        <MudTd>
            <MudIconButton Icon="@Icons.Material.Filled.Save" Color="Color.Success" OnClick="@(() => SavePublisher(context))" />
            <MudIconButton Icon="@Icons.Material.Filled.Cancel" Color="Color.Error" OnClick="@(() => CancelEdit(context))" />
        </MudTd>
    </RowEditingTemplate>
</MudTable>

逻辑部分代码：

@code {
    private MudTable<Publisher> _publisherTable;
    // 用ObservableCollection代替普通List，自动触发集合变更通知
    private ObservableCollection<Publisher> AdminPublishers { get; set; } = new();

    public void CreateNewPublisher()
    {
        var newPublisher = new Publisher { IsNew = true };
        AdminPublishers.Add(newPublisher);
        // 调用MudTable内置方法，将新行直接设为编辑状态，渲染输入框模板
        _publisherTable.SetEditingItem(newPublisher);
    }

    private async Task SavePublisher(Publisher publisher)
    {
        if (publisher.IsNew)
        {
            // 此处编写新增记录的后端提交逻辑
        }
        else
        {
            // 此处编写编辑记录的后端提交逻辑
        }
        // 提交完成后退出编辑态
        _publisherTable.ResetEditingItem();
        
        // 如果使用普通List作为数据源，此处需要重新赋值集合触发渲染：
        // AdminPublishers = AdminPublishers.ToList();
    }

    private void CancelEdit(Publisher publisher)
    {
        // 未保存的新增行取消时，从集合中移除避免残留空数据
        if (publisher.IsNew)
        {
            AdminPublishers.Remove(publisher);
        }
        _publisherTable.ResetEditingItem();
    }

    public class Publisher
    {
        public bool IsNew { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Address { get; set; } = string.Empty;
    }
}

• 不要自行给实体类加编辑状态相关的属性，所有行编辑状态切换都通过MudTable提供的内置方法实现，避免状态不同步。
• 保存逻辑中通过IsNew属性区分当前操作是新增还是编辑，分别对接对应的后端接口即可。
• 如果使用分页加载，新增行默认会添加到当前页的最后一行，如果需要固定在顶部，可以在Add新记录后调用OrderBy等方法调整集合顺序。

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