vue怎么做能编译的菜单树

要编译的菜单树可以使用 Vue.js 和 Element UI 来实现。首先需要定义一个菜单树的数据结构，包括菜单的名称、图标、子菜单等信息。然后使用 Vue.js 的组件来渲染菜单树。可以使用递归组件来动态渲染子菜单，从而实现菜单树的无限嵌套。最后使用 Element UI 的菜单组件来实现菜单的交互效果，包括菜单的展开、选中等功能。下面是一个简单的示例代码：

<template>
  <el-menu :default-openeds="defaultOpeneds">
    <template v-for="item in menuItems">
      <el-submenu v-if="item.children" :index="item.name">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{item.name}}</span>
        </template>
        <menu-item :menu-item="child" v-for="child in item.children" :key="child.name"></menu-item>
      </el-submenu>
      <el-menu-item v-else :index="item.name">
        <i :class="item.icon"></i>
        <span>{{item.name}}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
import MenuItem from './MenuItem.vue'

export default {
  name: 'MenuTree',
  components: {
    MenuItem
  },
  props: {
    menuItems: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      defaultOpeneds: []
    }
  },
  created() {
    this.defaultOpeneds = this.menuItems.filter(item => item.defaultOpen).map(item => item.name)
  }
}
</script>

在这个示例中，我们使用了 Element UI 的菜单组件来实现菜单树。使用递归组件来渲染子菜单，并且使用了默认打开菜单的功能。同时，我们还可以根据需要自定义菜单的图标、名称等样式。