说明:

• menuList是导航数组，使用el-menu加载就行，这里根据项目结构需要，将二级菜单分开，在内容页显示
• 代码示例中props传值menuList，本示例使用父子组件传值的方式
• 另外本示例程序使用的是vue3版本，页面路径根据每个人项目文件自行更改使用

一、基础工作

1、数组实例

menuList=[
 icon: "el_icon icon-system",
 link: "/systemSet", 
 name: "系统设置",
 list:[
    {
     flag: false,//控制子组件显示，点击时重新请求接口
     link: "account",
     name: "账号设置",
    },
    {
     flag: false,
     link: "role",
     name: "角色设置",
   }
 ]
]

2、在components中新建secondaryMenu.vue，作为二级显示的公用组件
3、在views中新建systemSet文件夹，再新建components作为存放公用文件，然后在components中新建文件systemTemplate.vue，示例如下：

image.png

二、代码示例

1、systemTemplate.vue中

<template>
  <div>
    <!-- 引用二级菜单组件   from标明哪个一级导航引用组件 -->
    <secondaryMenu :menu-list="menuList" :from="'/systemSet'" />
  </div>
</template>

<script>
import secondaryMenu from '../../../components/secondaryMenu'
export default {
  components: {
    secondaryMenu
  },
  props: {
   /* eslint-disable */
    menuList: Array
  }
}
</script>
<style lang='scss' scoped></style>

2、secondaryMenu.vue中

<template>
  <div class="system">
    <el-tabs v-model="active" type="card" class="min-height" @tab-click="clickTab">
      <el-tab-pane
        v-for="(item,index) in moduleList"
        :key="index"
        :label="item.name"
        :name="item.name"
        lazy
      >
        <component :is="item.link" v-if="item.flag" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// 导入所需二级导航文件
import account from '../views/systemSet/account'
import role from '../views/systemSet/role'
export default {
  name: '',
  components: {
    account,
    role
  },
  props: {
    /* eslint-disable */
    menuList: Array,
    from:'',//谁引用
  },
  data() {
    return {
      active: "", //默认选中
      moduleList: [] //组件列表
    };
  },
  created() {
    this.getMenuList();
  },
  mounted() {},
  methods: {
    getMenuList() {
      // console.log(this.menuList);
      // console.log(this.from);
      if (this.menuList.length > 0) {
        this.menuList.find(item => {
          if (item.link == this.from) {
            this.moduleList = item.list;
            this.active = this.moduleList[0].name;
            this.moduleList[0].flag=true
            return;
          }
        });
      }
    },
    clickTab(tab, event){ //控制每次点击标签，都重新请求子组件的接口
      const arr=this.moduleList
      for(var i=0;i<arr.length;i++){
        if(tab.name===arr[i].name){
          arr[i].flag=true
        }else{
          arr[i].flag=false
        }
      }
      this.moduleList=arr
    }
  }
};
</script>
<style lang='scss' scoped></style>

三、结语

今天又是励志做好码农的一天，fighting！！！