Telerik Blazor TreeView问题求助：节点高亮与展开图标异常

问题(i)：子节点莫名显示蓝色高亮 #

原因分析 #

1. 你在ItemTemplate里统一使用了<a>标签，即使非导航项也用了无href的<a>，浏览器默认会给<a>元素添加蓝色、下划线这类样式；
2. 你设置了SelectionMode="None"但仍绑定了@bind-SelectedItems，这会导致组件内部状态冲突，触发不必要的选中高亮样式。

解决步骤 #

• 替换非导航项的标签：把不可导航的条目从<a>改成<span>，避免浏览器默认样式干扰：

  <ItemTemplate>
      @{
          var item = (Page)context;
          if (item.IsNavigable)
          {
              <a @onclick="@(async () => await NavigateToPage(item))">@item.PageName</a>
          }
          else
          {
              <span>@item.PageName</span>
          }
      }
  </ItemTemplate>
  

• 移除不必要的SelectedItems绑定：SelectionMode="None"时组件不支持选中功能，绑定@bind-SelectedItems属于无效操作，直接删除该属性：

  <TelerikTreeView Data="@HierarchicalData"
                   SelectionMode="@TreeViewSelectionMode.None"
                   @bind-ExpandedItems="@ExpandedItems">
      <!-- 其余内容保持不变 -->
  </TelerikTreeView>
  

• 可选：覆盖Telerik默认样式：如果还有残留高亮，添加自定义CSS覆盖：

  .k-treeview-item .k-treeview-link {
      color: inherit;
      text-decoration: none;
  }
  .k-treeview-item.k-state-selected, .k-treeview-item.k-state-hover {
      background-color: transparent;
  }
  

问题(ii)：无子女节点仍显示展开图标 #

原因分析 #

你的Page类中ChildPages可能为null（而非空列表），Telerik TreeView默认通过ItemsField指定的集合是否存在判断是否有子节点，当ChildPages为null时，组件无法正确识别它没有子节点，从而显示展开图标。另外，你定义的IsListPage属性在ChildPages为null时会抛出空引用异常，无法正确判断节点是否有子项。

解决步骤 #

1. 确保ChildPages始终初始化为空列表：在Page记录中给ChildPages设置默认值，避免出现null：

   public record Page
   {
       // 其他属性保持不变
       public List<Page> ChildPages { get; set; } = new List<Page>();
   }
   

2. 修复IsListPage的空引用问题：

   public bool IsListPage => ChildPages?.Any() ?? false;
   

3. 绑定HasChildrenField到判断属性：在TreeViewBinding中指定HasChildrenField，让组件通过IsListPage判断是否有子节点：

   <TreeViewBinding TextField="PageName" 
                    ItemsField="ChildPages"
                    HasChildrenField="IsListPage">
       <!-- ItemTemplate保持不变 -->
   </TreeViewBinding>
   

4. 验证数据加载逻辑：确保接口返回的ChildPages字段在无项时为[]（空数组），或者通过上面的记录默认值保证反序列化后为空列表。

内容的提问来源于stack exchange，提问作者The Inquisitive Coder