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 菜单权限 横向区分展示

el-tree组件在Vue.js的Element UI库中，用于构建树状数据结构，常用于菜单导航。当涉及到菜单权限管理时，横向区分展示通常指的是权限控制下的菜单显示策略，即根据用户的角色或权限等级，动态地决定哪些节点应该在左侧菜单中显示，哪些隐藏。

具体来说，做法如下：

1. **数据绑定**: 首先，你需要有一个包含菜单及其权限信息的数据结构，每个菜单项都有一个`permission`属性，表示该菜单是否允许当前用户访问。

{
  "menu": [
    {
      "name": "菜单A",
      "path": "/menuA",
      "permission": true,
      "children": [...]
    },
    {
      "name": "菜单B",
      "path": "/menuB",
      "permission": false, // 当前用户无权访问
      "children": [...]
    }
  ]
}

2. **权限检查**: 在渲染el-tree之前，遍历菜单数据，对每个节点进行权限验证，只有拥有访问权限的节点才会添加到显示列表中。

3. **组件渲染**: 使用v-if或v-show指令来条件渲染节点，比如：

<template>
  <el-tree :data="visibleMenuItems" :props="{ children: 'children', label: 'name' }">
    <span slot-scope="{ node, $index }">
      <i v-if="node.permission">...</i> <!-- 显示图标 -->
      {{ node.name }}
      <el-icon type="chevron-right"></el-icon>
    </span>
  </el-tree>
</template>

<script>
export default {
  computed: {
    visibleMenuItems() {
      return this.menu.filter(item => item.permission);
    }
  }
};
</script>