基于Vue+elementUI menu组件的动态渲染多级目录

<template>
  <el-menu :default-openeds="defaultOpeneds" @open="handleOpen" @close="handleClose">
    <menu-item 
      v-for="item in menuData" 
      :key="item.name" 
      :item="item" 
      :base-path="item.path">
    </menu-item>
  </el-menu>
</template>
 
<script>
import MenuItem from './MenuItem'
 
export default {
  components: { MenuItem },
  data() {
    return {
      defaultOpeneds: []
    }
  },
  props: {
    menuData: {
      type: Array,
      required: true
    }
  },
  methods: {
    handleOpen(index, indexPath) {
      this.defaultOpeneds = [index];
    },
    handleClose(index, indexPath) {
      this.defaultOpeneds = [];
    }
  }
}
</script>

MenuItem 组件需要自己实现，用于递归渲染子菜单项。这个例子中，menuData 是一个需要传入的属性，它应该是一个对象数组，每个对象描述一个菜单项，包含 name 和 path 等属性。handleOpen 和 handleClose 方法用于更新当前展开的菜单项，以便动态展开菜单。