vue多级路由的后端数据渲染

最新推荐文章于 2024-04-20 11:30:00 发布

陈不知代码

最新推荐文章于 2024-04-20 11:30:00 发布

阅读量262

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/CHENC0518/article/details/129584108

版权

这段代码展示了如何在Vue.js应用中使用el-menu组件创建一个基于路由的多级菜单。菜单项动态生成，利用v-for遍历数据，子菜单通过item.children判断，并显示相应的meta信息如title。

摘要由CSDN通过智能技术生成

<el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    router
  >
    <div v-for="item in MeauList" :key="item.path">
      <el-sub-menu :index="item.path" v-if="item.children">
        <template #title>
          <span>{{ item.meta.title }}</span>
        </template>
        <el-menu-item
          v-for="itemchildren in item.children"
          :key="itemchildren.path"
          :index="itemchildren.path"
          >{{ itemchildren.meta.title }}</el-menu-item
        >
      </el-sub-menu>
      <el-menu-item :index="item.path" v-else>
        <span>{{ item.meta.title }}</span>
      </el-menu-item>
    </div>
  </el-menu>