el-tree最后一个节点不展示问题

Question

使用elment-UI时，使用el-tree 最后一个父节点不展示，使用的版本是2.15.10，由于是几年前的项目不能更改版本。代码如下

<el-scrollbar class="cr-infinite-list" >
       <el-tree highlight-current :data="treeData" :props="defaultProps" node-key="id" :default-expand-all="defaultexpandall" ref="Tree" v-loading="treeloading" @node-click="nodeclick" auto-expand-parent :default-expanded-keys="defaultexpandedkeys">
        </el-tree>
</el-scrollbar>

F12调试时发现最后一个节点是存在的，不知道为什么不展示

 .el-scrollbar__wrap{
  overflow-x: auto !important;
  height: calc(100% + 20px) !important;  
}
 .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view{
  white-space: nowrap;
  display: inline-block;
}

Answer 1

引自免费微信小程序：皆我百晓生

根据您提供的信息，问题是在使用 Element UI 的 el-tree 组件时最后一个父节点不展示。从 DevTools 截图中可以看出最后一个节点确实存在于 DOM 结构中，但可能因为样式或布局问题导致其未正确显示。

Element UI 2.15.10 版本的 el-tree 组件在滚动容器内可能存在一些样式兼容性问题。您贴出的 CSS 样式修改了滚动区域的高度和内容的 white-space 属性：

.el-scrollbar__wrap {
  overflow-x: auto !important;
  height: calc(100% + 20px) !important;  
}

.el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
  white-space: nowrap;
  display: inline-block;
}

这些样式可能导致滚动容器高度计算异常或者节点换行逻辑出现问题，从而影响最后一个节点的显示。

为了解决这个问题，请尝试以下步骤：

1. 检查 .el-scrollbar 和 .el-tree 相关的 CSS 样式，确保它们没有覆盖默认样式并正确设置了高度和滚动行为。
2. 确保最后一个父节点不是由于滚动条滚动到底部后被遮挡，尝试去掉自定义的 height 样式，并检查页面的整体布局是否合理。
3. 验证数据源 treeData 是否包含了最后一个节点的所有必要属性，特别是用于层级显示的 children 属性。

如果需要模拟修复，您可以试着逐步减少对滚动区域高度的自定义，或者调整 white-space 设置以允许内容正常换行，如下所示：

/* 取消自定义高度 */
.el-scrollbar__wrap {
  /* height: calc(100% + 20px) !important; */
}

/* 恢复默认的 white-space 行为 */
.el-scrollbar .el-scrollbar__wrap .el-tree-node {
  white-space: normal;
}

由于这是一个基于文本的交互，无法直接查看您的页面实际效果，建议您按照上述分析排查，并在项目中逐步调试样式的改变以找到问题所在。