如何在MudAutocomplete中设置部分项可选、部分不可选？

针对你的需求，MudAutocomplete本身没有内置的单个选项禁用属性，但可以通过自定义模板+拦截选择事件的方式实现仅叶子节点可选的效果，具体步骤如下：

1. 核心思路 #

• 通过ItemTemplate自定义选项渲染，给不可选节点添加视觉禁用样式
• 拦截OnItemClick事件，仅允许选择IsSelectable=true的节点
• 处理键盘导航场景，防止用户通过键盘选中不可选节点

2. 完整代码实现 #

首先定义你的树节点模型 #

public class TreeNode
{
    public int Id { get; set; }
    public string Title { get; set; }
    public bool IsSelectable { get; set; }
    public List<TreeNode> Children { get; set; } = new();
    public TreeNode Parent { get; set; } // 用于计算节点层级缩进
}

Blazor组件中使用MudAutocomplete #

<MudAutocomplete @ref="AutoCompleteRef"
                 T="TreeNode"
                 @bind-Value="SelectedItem"
                 Items="FlatNodes"
                 TextField="@(node => node.Title)"
                 ItemTemplate="@RenderTreeItem"
                 OnItemClick="HandleItemClick"
                 OnKeyDown="HandleKeyNavigation"
                 Placeholder="选择子项...">
</MudAutocomplete>

@code {
    private MudAutocomplete<TreeNode> AutoCompleteRef { get; set; }
    private TreeNode SelectedItem { get; set; }
    private List<TreeNode> TreeData { get; set; }
    private List<TreeNode> FlatNodes { get; set; } = new();

    protected override void OnInitialized()
    {
        // 初始化你的树数据（示例）
        TreeData = new List<TreeNode>
        {
            new TreeNode
            {
                Id = 1,
                Title = "分类A",
                IsSelectable = false,
                Children = new List<TreeNode>
                {
                    new TreeNode { Id = 11, Title = "子项A1", IsSelectable = true },
                    new TreeNode { Id = 12, Title = "子项A2", IsSelectable = true }
                }
            },
            new TreeNode
            {
                Id = 2,
                Title = "分类B",
                IsSelectable = false,
                Children = new List<TreeNode>
                {
                    new TreeNode { Id = 21, Title = "子项B1", IsSelectable = true }
                }
            }
        };

        // 扁平化树结构（MudAutocomplete需要扁平列表）
        FlatNodes = FlattenTree(TreeData);
    }

    // 扁平化树结构并设置Parent属性
    private List<TreeNode> FlattenTree(List<TreeNode> nodes, TreeNode parent = null)
    {
        var result = new List<TreeNode>();
        foreach (var node in nodes)
        {
            node.Parent = parent;
            result.Add(node);
            if (node.Children.Any())
            {
                result.AddRange(FlattenTree(node.Children, node));
            }
        }
        return result;
    }

    // 自定义选项渲染模板：添加缩进+禁用样式
    private RenderFragment<TreeNode> RenderTreeItem = node => __builder =>
    {
        // 根据节点层级计算缩进（模拟树结构）
        var indentLevel = GetNodeDepth(node);
        var indent = indentLevel * 18;

        // 不可选节点添加灰色透明+禁止光标样式
        var disabledStyle = !node.IsSelectable ? "opacity: 0.6; cursor: not-allowed;" : "";

        <div style="padding-left: @($"{indent}px"); @disabledStyle">
            @node.Title
        </div>
    };

    // 计算节点层级深度
    private int GetNodeDepth(TreeNode node)
    {
        int depth = 0;
        var current = node.Parent;
        while (current != null)
        {
            depth++;
            current = current.Parent;
        }
        return depth;
    }

    // 处理鼠标点击选择：仅允许可选节点
    private void HandleItemClick(TreeNode node)
    {
        if (node.IsSelectable)
        {
            SelectedItem = node;
        }
        // 可选：不可选时可以添加提示，比如MudSnackbar
        // Snackbar.Add("该分类不可选择", Severity.Warning);
    }

    // 处理键盘导航：阻止回车选中不可选节点
    private void HandleKeyNavigation(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            var highlightedNode = AutoCompleteRef.GetHighlightedItem();
            if (highlightedNode != null && !highlightedNode.IsSelectable)
            {
                e.PreventDefault();
                // 可选：提示用户不可选择
                // Snackbar.Add("仅子项可选择", Severity.Info);
            }
        }
    }
}

3. 关键细节说明 #

• 扁平化树结构：MudAutocomplete只接受扁平列表，所以需要将你的N叉树转换为扁平集合，同时通过Parent属性记录层级关系，用于渲染时的缩进。
• 视觉提示：通过ItemTemplate给不可选节点添加透明样式和禁止光标，让用户直观感知哪些项不能选。
• 事件拦截：无论是鼠标点击还是键盘回车，都判断节点的IsSelectable属性，仅允许可选节点被赋值给SelectedItem。

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