DevExtreme 23.2升级后TreeView生成多余空白展开元素问题

问题现象 #

升级DevExtreme至23.2版本后，TreeView组件根元素的图标前出现空白的展开元素，与预期显示效果不符：

预期显示效果：

空白展开元素细节：

当前使用代码 #

<div class="menu-container">
  <dx-tree-view [items]="items"
                [keyExpr]="'key'"
                [selectionMode]="'single'"
                [focusStateEnabled]="false"
                [expandEvent]="'click'"
                [animationEnabled]="false"
                [height]="'100%'"
                [width]="'100%'"
                itemTemplate="itemTemplate"
                (onItemSelectionChanged)="onItemSelectionChanged()"
                (onItemExpanded)="onItemExpanded($event)"
                (onItemClick)="onItemClick($event)">
    <div *dxTemplate="let menuItem of 'itemTemplate'"
         [ngClass]="{
          'is-parent': menuItem.items && menuItem.items.length > 0
         }">
      <a (click)="onMenuItemClick($event)"
         [attr.href]="menuItem.route ? menuItem.route : null">
        <i *ngIf="menuItem.icon"
           class="dx-icon mdi mdi-{{menuItem.icon}}">
        </i>
        <span>{{menuItem.name}}</span>
      </a>
    </div>
    </dx-tree-view>
</div>

问题原因 #

DevExtreme 23.2版本调整了TreeView展开按钮的渲染逻辑：默认会为所有包含子项的节点（包括根节点）生成展开/折叠元素，而旧版本中根节点的展开按钮可能默认不渲染。自定义模板时，组件仍会保留默认的展开元素占位，导致出现空白区域。

解决方案 #

方案1：通过配置控制展开按钮显示 #

利用showExpandButtons属性，仅为非根节点显示展开按钮。如果你的根节点没有parentKey字段，可以这样绑定：

<dx-tree-view [items]="items"
              [showExpandButtons]="(item) => !!item.parentKey"
              <!-- 保留原有其他属性 -->
>

该逻辑会判断节点是否存在父节点，只有非根节点才显示展开按钮。

方案2：CSS隐藏根节点的展开元素 #

如果不想修改组件配置，直接通过CSS定位根节点的展开按钮并隐藏：

.dx-tree-view-root-node .dx-tree-view-expand-button {
    display: none;
}

此方法直接屏蔽根节点的展开元素占位，快速解决显示问题。

方案3：检查数据源结构 #

确认根节点的items属性是否合理：如果根节点实际没有子项，需将items设置为null或直接移除该字段，避免组件误判为可展开节点。

验证 #

应用上述任一方案后，刷新页面即可看到根节点前的空白展开元素消失，恢复预期显示效果。

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