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>