vue element 数据动态生成 el-menu

最新推荐文章于 2025-03-25 20:42:49 发布

wyk304443164

最新推荐文章于 2025-03-25 20:42:49 发布

阅读量1.4k

点赞数

分类专栏： vue 文章标签： vue 前端 elementui

本文链接：https://blog.csdn.net/wyk304443164/article/details/124124845

版权

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用 Vue 的动态组件和递归特性，创建自定义 `customElMenu` 组件，实现在 El-Menu 中展示嵌套层级的课程管理菜单。通过实例代码展示，包括 menuList 数据结构和组件模板的详细实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用到
动态组件和递归组件

customElMenu.vue

<template>
  <div>
    <component
      :is="menuItem.children ? 'el-submenu' : 'el-menu-item'"
      v-for="menuItem in list"
      :key="menuItem.id"
      :index="menuItem.id.toString()"
    >
      <template v-if="menuItem.children">
        <template slot="title">{{ menuItem.name }}</template>
        <customElMenu :list="menuItem.children"></customElMenu>
      </template>
      <template v-else>
        <i :class="menuItem.icon"></i>
        <span slot="title">{{ menuItem.name }}</span>
      </template>
    </component>
  </div>
</template>

<script>
export default {
  name: "customElMenu",
  props: {
    list: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="stylus" scoped></style>

父组件

<el-menu
        default-active="1"
        class="el-menu-vertical"
        @open="handleOpen"
        @close="handleClose"
        background-color="#ffffff"
        text-color="#000"
        active-text-color="#FF660A"
      >
        <CustomElMenu :list="menuList"></CustomElMenu>
      </el-menu>

menuList: [
        {
          id: 1,
          name: "课程主页",
          icon: "el-icon-menu",
          url: "/manage/workbench/index",
        },
        {
          id: 2,
          name: "课程大纲",
          icon: "el-icon-setting",
          url: "/manage/workbench/manage-course",
          children: [
            {
              id: 21,
              name: "子1",
              children: [
                {
                  id: 31,
                  name: "子2",
                },
              ],
            },
          ],
        },
        {
          id: 3,
          name: "课程管理",
          icon: "el-icon-setting",
          url: "/manage/workbench/manage-course",
        },
        {
          id: 4,
          name: "课程管理",
          icon: "el-icon-setting",
          url: "/manage/workbench/manage-course",
        },
      ],