MudBlazor TreeView如何添加删除选中节点并同步更新展示视图

核心逻辑：MudBlazor TreeView 对实现了INotifyCollectionChanged接口的集合会自动监听变更、触发UI重渲染，不需要额外写刷新逻辑，只要把节点的子集合从普通List<T>换成ObservableCollection<T>即可。

前置准备 #

• 自定义的树节点类中，子节点集合必须定义为ObservableCollection<T>类型：

// 自定义树节点类示例
public class TreeItem
{
    public string NodeName { get; set; }
    // 必须用ObservableCollection才能自动通知UI集合变更
    public ObservableCollection<TreeItem> Children { get; set; } = new();
    // 可选：新增Parent属性存储父节点，避免后续遍历查找父节点，性能更高
    public TreeItem? Parent { get; set; }
}

• Razor页面中绑定TreeView与选中节点：

<MudTreeView Items="RootNodes"
             SelectedValue="@SelectedNode"
             T="TreeItem">
    <ItemTemplate>
        <MudTreeViewItem Value="@context" 
                         Text="@context.NodeName" 
                         Items="@context.Children"
                         T="TreeItem"/>
    </ItemTemplate>
</MudTreeView>

<!-- 操作按钮 -->
<MudButton OnClick="AddChildToSelected" Color="Color.Primary" Disabled="@SelectedNode==null">添加子节点</MudButton>
<MudButton OnClick="DeleteSelectedNode" Color="Color.Error" Disabled="@SelectedNode==null">删除选中节点</MudButton>

@code {
    // 根节点集合同样用ObservableCollection
    private ObservableCollection<TreeItem> RootNodes { get; set; } = new();
    private TreeItem? SelectedNode { get; set; }

    protected override void OnInitialized()
    {
        // 初始化树结构示例
        var root = new TreeItem { NodeName = "根节点" };
        var child1 = new TreeItem { NodeName = "子节点1", Parent = root };
        root.Children.Add(child1);
        RootNodes.Add(root);
    }
}

删除选中节点 #

直接从节点所属的父集合中移除节点即可，UI会自动同步更新：

private void DeleteSelectedNode()
{
    if (SelectedNode == null) return;
    
    // 如果用了Parent属性直接取父节点，没有的话可以写递归方法遍历找父节点
    if (SelectedNode.Parent == null)
    {
        // 选中的是根节点，从根集合移除
        RootNodes.Remove(SelectedNode);
    }
    else
    {
        // 选中的是子节点，从父节点的子集合移除
        SelectedNode.Parent.Children.Remove(SelectedNode);
    }
    
    SelectedNode = null;
}

给选中节点添加子节点 #

直接往选中节点的Children集合中插入新节点即可：

private void AddChildToSelected()
{
    if (SelectedNode == null) return;

    var newNode = new TreeItem
    {
        NodeName = $"新节点_{Guid.NewGuid().ToString("N")[..6]}",
        Parent = SelectedNode
    };
    SelectedNode.Children.Add(newNode);
}

注意事项 #

• 不要用List<T>存储节点子集合，List的增删操作不会主动通知UI更新，除非操作完成后手动调用StateHasChanged()强制刷新，但更推荐用ObservableCollection<T>的原生通知机制
• 如果节点层级深、数量大，建议给节点类加Parent属性存储父节点，避免每次删除前递归遍历查找父节点，提升操作效率

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