Element UI中 el-tree 组件 css 实现横向溢出滚动实现

在Element UI的el-tree组件中，要实现横向滚动，可以通过设置容器的overflow属性为auto或scroll，并为容器设置固定宽度。同时，为了使树状结构横向显示，可以给树节点设置flex布局。

以下是一个简单的实现示例：

<template>
  <el-tree
    :data="data"
    class="horizontal-tree"
    node-key="id"
    ref="tree"
    :props="defaultProps">
  </el-tree>
</template>
 
<script>
export default {
  data() {
    return {
      data: [/* 您的树形数据 */],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  }
};
</script>
 
<style>
.horizontal-tree {
  width: 300px; /* 设置一个固定宽度 */
  overflow-x: auto; /* 横向滚动 */
  white-space: nowrap;
}
 
.el-tree-node {
  display: flex;
}
</style>

在这个例子中，.horizontal-tree 类定义了树的样式，包括固定宽度和横向滚动条。.el-tree-node 类使得每个树节点都以flex布局横向排列。当内容宽度超过设定的300px宽度时，用户将能够通过横向滚动条来查看更多内容。