elementui递归组件生成无限菜单

最新推荐文章于 2023-06-21 11:08:02 发布

williamyi74

最新推荐文章于 2023-06-21 11:08:02 发布

阅读量568

点赞数 3

分类专栏： vue

本文链接：https://blog.csdn.net/Suk__/article/details/118400528

版权

vue 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

Aside.vue:

<template>
  <section class="aside">
    <el-menu
      text-color="#686a6e"
      active-text-color="#1a8aff"
      router
      :default-active="$route.path"
      :collapse="isCollapse"
    >
      <MenuList v-model:menuList="menuList" />
    </el-menu>
  </section>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent, ref } from 'vue'
const useInitData = () => {
  const menuList = [
    {
      id: 1,
      title: '数据预览',
      icon: 'el-icon-pie-chart',
      path: '/layout/chart',
    },
    {
      id: 2,
      title: '用户列表',
      icon: 'el-icon-user',
      path: '/layout/user',
    },
    {
      id: 3,
      title: '题库列表',
      icon: 'el-icon-edit-outline',
      path: '/layout/question',
    },
    {
      id: 4,
      title: '企业列表',
      icon: 'el-icon-office-building',
      path: '/layout/business',
    },
    {
      id: 5,
      title: '学科列表',
      icon: 'el-icon-notebook-2',
      path: '/layout/subject',
    },
  ]
  return {
    menuList,
  }
}
export default defineComponent({
  name: 'Aside',
  props: ['isCollapse'],
  setup() {
    const initData = useInitData()
    return {
      ...initData,
    }
  },
  components: {
    MenuList: defineAsyncComponent({
      loader: () => import('@/pages/layout/components/layout/components/MenuList.vue'),
    }),
  },
})
</script>

<style lang="scss" scoped>
.aside {
  .el-menu {
    // 展开时的动画
    transition: width 0.2s;
    border-right: none;
    min-width: 200px;
    .el-menu-item {
      &:focus {
        background-color: #fff;
      }
    }
  }
}
</style>

菜单组件menulist.vue:

<template>
  <section class="menuList">
    <template v-for="item in menuList" :key="item.id">
      <el-submenu :index="item.path" v-if="item.children">
        <template #title>
          <i :class="[item.icon]" />
          <span>{{ item.title }}</span>
        </template>
        <MenuList v-model:menuList="item.children" />
      </el-submenu>
      <el-menu-item v-else :index="item.path">
        <template #title>
          <i :class="[item.icon]" />
          <span>{{ item.title }}</span>
        </template>
      </el-menu-item>
    </template>
  </section>
</template>

<script>
/**
 * 递归生成菜单组件
 */
import { defineAsyncComponent } from 'vue'
export default {
  name: 'MenuList',
  props: ['menuList'],
  components: {
    MenuList: defineAsyncComponent({
      loader: () => import('@/pages/layout/components/layout/components/MenuList.vue'),
    }),
  },
}
</script>

<style lang="scss" scoped>
.menuList {
}
</style>