element通过循环树状变量生成el-menu，并根据树节点数据的children判断是否存在多级菜单

在Vue.js中，可以使用Element UI库中的`el-menu`组件来创建树状菜单，通常会配合`v-for`指令以及递归的方式来遍历一个树形数据结构。这里是一个基本的例子：

<template>
  <el-menu :default-active="activeIndex" class="menu-tree">
    <el-submenu v-for="(item, index) in menuData" :key="index" :index="item.path">
      <template slot="title">{{ item.name }}</template>
      <el-menu-item v-if="item.children && item.children.length > 0">
        <i :icon="item.icon"></i>
        <span slot="title">{{ item.text }}</span>
        <el-submenu v-for="subItem in item.children" :key="subItem.id">
          <template slot="title">{{ subItem.name }}</template>
          <el-menu-item :index="subItem.path">{{ subItem.text }}</el-menu-item>
        </el-submenu>
      </el-menu-item>
      <el-menu-item v-else>
        <i :icon="item.icon"></i>
        <span slot="title">{{ item.text }}</span>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menuData: [
        // 树状菜单数据，例如：
        {
          name: '一级菜单',
          path: '/level1',
          children: [
            { id: 1, name: '二级菜单', text: '文字描述', icon: '...', path: '/level1/level2' },
            // 更多子项...
          ]
        }
        // 其他子菜单项...
      ],
      activeIndex: '', // 初始激活的菜单项
    };
  },
};
</script>

在这个例子中，`menuData`是一个树形的数据结构，每个节点包含`name`、`path`、`children`等属性。`v-for`遍历每一层菜单，如果是有子菜单的节点（`item.children && item.children.length > 0`），则继续嵌套一个`el-submenu`。如果没有子菜单，则显示单个菜单项。