js如何构造elementUI树状菜单的数据结构详解

下面是关于如何构造ElementUI树状菜单数据结构的攻略：

一、树状菜单数据结构的构成

ElementUI树状菜单所需要的数据结构是一个层级结构的树形数据结构，它由多个节点组成，每个节点可能有子节点，也可能没有。一棵树可以看做是枝干和叶子构成的，枝干负责连接，而叶子负责储存信息。因此，需要针对菜单的特性构造一个合适的数据结构，这个数据结构应该包含以下属性：

• 菜单选项名称
• 路由链接
• 图标
• 是否有子菜单
• 子菜单

下面是一个示例结构：

{
  "name": "Dashboard",
  "route": "/dashboard",
  "icon": "el-icon-menu",
  "children": [
    {
      "name": "分析页",
      "route": "/dashboard/analysis",
      "icon": "",
      "children": null
    },
    {
      "name": "监控页",
      "route": "/dashboard/monitor",
      "icon": "",
      "children": null
    }
  ]
},
{
  "name": "表单页",
  "route": "/form",
  "icon": "el-icon-document",
  "children": [
    {
      "name": "基础表单",
      "route": "/form/basic-form",
      "icon": "",
      "children": null
    },
    {
      "name": "高级表单",
      "route": "/form/advanced-form",
      "icon": "",
      "children": null
    }
  ]
}

二、构建树形结构数据

1. 递归构建

可以通过递归构建树形结构数据，通过遍历数组中的每一个元素，如果元素有children，则递归解析子节点并挂在当前节点上，示例代码如下：

function buildTree(data) {
  let mapping = {};
  let result = [];

  for (let i = 0, len = data.length; i < len; i++) {
    let item = data[i];
    item.children = [];

    mapping[item.id] = item; // 以元素id为映射键

    let parent = mapping[item.parentId];
    if (parent) {
      parent.children.push(item);
    } else {
      result.push(item);
    }
  }

  return result;
}

1. 常规循环构建

通过常规的循环构建树形结构数据也是可行的，需要在遍历元素时，利用一个数组存储要遍历的节点，示例代码如下：

function buildTree(data) {
  let stack = [], result = [];

  for (let i = 0, len = data.length; i < len; i++) {
    let item = data[i];

    if (!item.parentId) {
      result.push(item);
      stack.push(item);
    }
  }

  while (stack.length > 0) {
    let current = stack.pop();

    for (let i = 0, len = data.length; i < len; i++) {
      let item = data[i];

      if (item.parentId === current.id) {
        current.children.push(item);
        stack.push(item);
      }
    }
  }

  return result;
}

三、如何使用ElementUI菜单组件

使用ElementUI菜单组件，需要先通过ElementUI的el-menu标签创建一个菜单，然后在el-menu里定义菜单项，设置index属性为路由路径，设置icon属性为菜单icon，设置submenu属性用于嵌套子菜单：

<el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleMenuSelect">
  <el-submenu v-for="(item, index) in menu" :key="index" v-if="item.children !== null">
    <template slot="title">
      <i :class="item.icon"></i> {{ item.name }}
    </template>
    <el-menu-item v-for="(child, subIndex) in item.children" :key="subIndex" :index="child.route">
      <i :class="child.icon"></i> {{ child.name }}
    </el-menu-item>
  </el-submenu>
  <el-menu-item v-else v-for="(item, index) in menu" :key="index" :index="item.route">
    <i :class="item.icon"></i> {{ item.name }}
  </el-menu-item>
</el-menu>

其中，menu是我们在前面构造的树状结构数据。

至此，ElementUI树状菜单的构造过程就介绍完毕了。