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横向滚动条

el-tree的横向滚动条可以通过在样式表中设置overflow属性来实现。在引用中的代码示例中，.filter-tree类被设置为overflow: auto;，这意味着当内容超过容器的宽度时，会显示横向滚动条。另外，在引用中提到了结合el-select与el-tree使用时的在线示例，您可以参考该示例来了解如何设置el-tree的横向滚动条。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [el-tree 解决横向滚动条和纵向滚动条问题](https://blog.csdn.net/IT_iosers/article/details/126400762)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [el-select-tree:ElementUI的el-select与el-tree结合](https://download.csdn.net/download/weixin_42135773/18435535)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [elementUI - tree添加横向滚动条](https://blog.csdn.net/qq_43765727/article/details/121229506)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]

el-card添加横向滚动条

要在el-card上添加横向滚动条，可以在.card__body元素上设置overflow-x: auto;属性。这将使内容超出时出现横向滚动条。例如：

<el-card>
  <div slot="header" class="clearfix">
    <span>标题</span>
  </div>
  <div class="card__body" style="overflow-x: auto;">
    <!-- 这里放内容 -->
  </div>
</el-card>