el-tree 节点横向展示

el-tree 节点默认是以纵向展示的，如果需要横向展示，可以通过设置 el-tree 的属性 `direction` 为 `horizontal` 来实现。

具体实现方式如下：

<el-tree :data="treeData" :direction="horizontal"></el-tree>

需要注意的是，横向展示时节点的宽度是根据内容自适应的，如果节点内容过长可能会导致节点过宽，建议在设计时考虑节点内容的长度。

相关问题

el-tree 添加横向滚动条

要给 el-tree 添加横向滚动条，可以在 el-tree 外面包裹一个 div 容器，并设置该容器的 overflow-x 属性为 auto。具体实现步骤如下：

1. 在 el-tree 外面包裹一个 div 容器：

<div class="tree-container">
  <el-tree :data="data"></el-tree>
</div>

2. 在样式表中设置该容器的 overflow-x 属性为 auto：

.tree-container {
  overflow-x: auto;
  white-space: nowrap; /* 防止树节点换行 */
}

这样，当 el-tree 的宽度超出容器的宽度时，就会自动生成横向滚动条。

el-tree-v2 横向滚动

### 解决方案

对于 `el-tree-v2` 组件实现横向滚动条的功能，可以通过自定义 CSS 样式来达成这一目标。具体来说，在 `.el-vl__wrapper` 和 `.el-virtual-scrollbar` 上应用特定的样式能够有效控制树形结构的内容显示方式以及滚动行为。

#### 自定义CSS样式配置

为了使 `el-tree-v2` 的内容支持横向滚动，需确保其容器具有足够的灵活性以适应子项宽度变化，并且当内容超出视窗范围时能触发滚动机制：

<style lang="scss" scoped>
:deep() {
    // 设置el-tree宽度，产生水平滚动
    .el-vl__wrapper {
        width: v-bind("state.maxlengthLabelWidth");
        position: static;
    }
    
    // 调整虚拟滚动条的位置固定不变，防止随内容移动而消失
    .el-virtual-scrollbar {
        position: fixed !important;
        top: 317px !important; /* 需要依据实际布局调整 */
        left: 416px !important; /* 需要依据实际布局调整 */
        right: unset !important;
        bottom: unset !important;
    }
}
</style>

上述代码片段通过设置`.el-vl__wrapper` 的宽度属性为变量绑定形式(`v-bind`)，允许动态计算最长标签所需的最小宽度；同时利用绝对定位技术保持滚动栏始终可见而不受内部元素影响[^2]。

另外一种更为通用的方法是在全局或局部范围内增加对整个 tree 容器样式的修改，比如下面的例子展示了如何让所有节点及其后代都能响应溢出情况下的自动滚动特性:

.flow-tree{
    overflow: auto;
    flex: 1;
    height: 300px;
    margin: 10px;

    >>>.el-tree-node{
        > .el-tree-node__children{
            overflow: visible !important;
        }
    }
}

此段 SCSS 将应用于带有 `flow-tree` 类名的选择器上，它不仅设置了整体高度和外边距，还特别指定了子级列表应具备可扩展性的表现形式，从而避免因嵌套层次过多而导致不可见的问题发生[^3]。

最后值得注意的是，如果希望每一条记录都能够完整展示而不是被裁剪掉，则可以在全局层面添加如下规则：

::v-deep .el-tree {
    width: fit-content;
    min-width: -webkit-fill-available;
}

这段声明使得每一个单独的树状单元格都可以根据自身内容量自行决定所需的空间大小，进而自然形成必要的滚动区域[^4]。

综上所述，针对不同场景需求可以选择合适的方式来定制化处理 `el-tree-v2` 的横向滚动效果，既满足视觉美观又不影响用户体验。