el-menu--多级菜单封装使用

左手牵♪♡右手

已于 2022-04-20 10:25:05 修改

阅读量2.8k

点赞数 1

分类专栏： element 文章标签：前端

于 2022-03-16 11:15:08 首次发布

本文链接：https://blog.csdn.net/weixin_45102212/article/details/123521490

版权

本文记录了在前端项目中如何封装和使用el-menu组件，包括menuItem.vue组件的实现和LeftMenu.vue中引用组件的示例。虽然当前示例为三级菜单的静态写法，但强调了需要通过循环优化以适应动态数据。

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

代码只做简单记录，细节需要去调试

1、组件：menuItem.vue

<template>
  <div>
    <template v-for="(item, index) in data">
      <!-- 因为有子集和无子集渲染html标签不一样，所以要分为两种情况
           情况一：有子集的情况：                         -->
      <el-submenu :key="index" :index="String(index + 1)"  v-if="item.children.length > 0">
        <template slot="title">
          <span>{
  { item.name }}</span>
        </template>
        <menuItem :data="item.children"></menuItem>
      </el-submenu>
      <!-- 情况二：没子集的情况 -->
      <el-menu-item :key="index" v-else :index="String(index + 1)">
        <span slot="title">{
  { item.name }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: "menuItem",
  props: {
    data: {
      type: Array,
      default: [],
    },
  },
  // 注意： 在template标签上使用v-for，:key="index"不能写在template标签上，因为其标签不会被渲染，会引起循环错误
};

</script>

2、LeftMenu.vue 引用组件使用：

<template>
<!--   -->
  <el-menu :default-openeds="defaultOpeneds"
           :default-active="defaultActive"
           @select="selectMenu"
           v-loading="loading">
    <!-- 组件 -->
    <menuItem :data="menuArr"></menuItem>
  </el-menu>
</template>
<script>
 // 引入递归菜单组件
import menuItem from '@/views/business/learning/components/newPage/took/menuItem.vue'
import { getLeftList, getExamLeftList } from '@/api/business/learning'
export default {
  name: 'LeftMenu',
  mixins: [],
  components: {menuItem},
  props: {
    type: {
      type: Number,
      default: 1