[element-ui] elementUI-NavMenu 导航菜单动态渲染(递归) 支持横向导航

最新推荐文章于 2024-08-16 15:47:36 发布

lyt-top

最新推荐文章于 2024-08-16 15:47:36 发布

阅读量5.1k

点赞数 4

文章标签： vue js vue.js css3 es6

本文链接：https://blog.csdn.net/qq_34450741/article/details/108301318

版权

彩蛋：后台管理系统一站式平台模板

vue-next-admin，这是基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板库

1、效果图

普通不支持横向布局请看这篇文章
在这里插入图片描述

2、代码

数据模拟格式与这里面的相同点击跳转查看数据格式

2.1 主组件

<template>
  <el-menu mode="horizontal" :default-active="$route.path" active-text-color="#09f">
    <template v-for="(val, key) in menuList">
      <el-submenu
        :index="val[props.index]"
        v-if="val[props.children] && val[props.children].length > 0"
        :key="key"
      >
        <template slot="title">
          <i :class="val.icon"></i>
          <span>{{ val[props.label] }}</span>
        </template>
        <SubItem :chil="val[props.children]" :props="props" @getSubItem="onMenuItemClick" />
      </el-submenu>
      <el-menu-item :index="val[props.index]" v-else @click="onMenuItemClick(val)" :key="key">
        <i :class="val.icon"></i>
        <span slot="title">{{ val[props.label] }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script>
import SubItem from "./subItem";
export default {
  name: "subMenu",
  components: { SubItem },
  props: {
    menuList: {
      type: Array,
      default() {
        return [];
      },
    },
    props: {
      type: Object,
      default() {
        return {
          children: "children",
          label: "label",
          index: "id",
        };
      },
    },
  },
  methods: {
    onMenuItemClick(item) {
      this.$emit("getmenu", item);
    },
  },
};
</script>

2.2 SubItem 组件 注意：此组件为了实现 NavMenu 导航菜单横向布局,
实现垂直布局的话，普通不支持横向布局请看这篇文章。当前也可以使用当前组件直接改mode="vertical"

<template>
  <div>
    <template v-for="(val, key) in chil">
      <el-submenu
        :index="val[props.index]"
        :key="key"
        v-if="val[props.children] && val[props.children].length > 0"
      >
        <template slot="title">{{ val[props.label] }}</template>
        <sub-item :chil="val[props.children]" :props="props" @getSubItem="onSubTtemClick" />
      </el-submenu>
      <el-menu-item
        :index="val[props.index]"
        v-else
        :key="key"
        @click="onSubTtemClick(val)"
      >{{ val[props.label] }}</el-menu-item>
    </template>
  </div>
</template>

<script>
export default {
  name: "subItem",
  props: {
    chil: {
      type: Array,
      default() {
        return [];
      },
    },
    props: {
      type: Object,
      default() {
        return {
          children: "children",
          label: "label",
          index: "id",
        };
      },
    },
  },
  methods: {
    onSubTtemClick(item) {
      this.$emit("getSubItem", item);
    },
  },
};
</script>

3、页面调用

// 横向导航 icon 高亮
.el-menu--horizontal .is-active .el-submenu__title i {
  color: #09f;
}

<template>
  <SubMenu :menu-list="menuList" :props="defaultProps" @getmenu="onGetMenu" />
</template>

<script>
import { menuList } from "@/mock/menuList";
import SubMenu from "@/components/subMenu";
export default {
  name: "elegant",
  components: { SubMenu },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "title",
        index: "path",
      },
      menuList,
    };
  },
  methods: {
    onGetMenu(item) {
      this.$router.push({
        path: item.path,
        query: { t: new Date().getTime() },
      });
    },
  },
};
</script>