element通过循环树状变量生成el-menu

在Vue.js中，如果你想通过循环遍历树形数据来动态生成`el-menu`(Element UI的菜单组件) ，你可以这样做：

首先，假设你有一个类似这样的树状数据结构：

const treeData = [
  {
    name: '根节点',
    children: [
      { name: '子节点1' },
      { name: '子节点2' }
    ]
  },
  // 其他子节点...
]

然后，在Vue模板中，你可以利用v-for指令来遍历这个数组，并结合`el-menu-item`组件来构建菜单项：

<template>
  <el-menu :default-active="$route.path" class="menu-tree">
    <el-submenu v-for="(item, index) in treeData" :key="index">
      <template slot="title">{{ item.name }}</template>
      <el-menu-item v-for="child in item.children" :key="child.name">
        {{ child.name }}
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

在这个例子中，每个`el-submenu`代表一级菜单，而其内的`el-menu-item`则表示二级菜单项。当数据发生变化时，由于用了`v-if`或`v-for`指令，Vue会自动更新DOM以反映新数据。