vue递归element中的NavMenu

最新推荐文章于 2024-03-05 12:26:53 发布

Billow_lamb

最新推荐文章于 2024-03-05 12:26:53 发布

阅读量265

点赞数

文章标签： vue elementui

本文链接：https://blog.csdn.net/Billow_lamb/article/details/119207554

版权

这篇博客展示了如何在Vue.js中使用Element UI库创建一个水平导航菜单，并进行了父子组件间的交互。通过递归组件`submenu-item`，实现了菜单项的动态加载，包括子菜单的展开和选中事件的处理。示例代码详细地说明了如何配置`el-menu`和`el-submenu`，以及如何传递数据和处理选中事件。

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

vue递归element中的NavMenu
父组件

<template>
  <div>
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      style="width: 100%; display: inline-flex"
    >
      <submenu-item
        v-for="(route, index) in listNave"
        :key="route.name + index"
        :item="route"
        :base-path="route.name"
      ></submenu-item>
    </el-menu>
  </div>
</template>

<script>
import submenuItem from "./submenuItem";
export default {
  components: { submenuItem },
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "处理中心",
      listNave: [
        { name: "处理中心" },
        {
          name: "我的工作台",
          children: [
            { name: "选项1" },
            { name: "选项2" },
            { name: "选项3" },
            {
              name: "选项4",
              children: [
                { name: "选项1" },
                { name: "选项2" },
                { name: "选项3" },
              ],
            },
          ],
        },
        { name: "消息中心" },
        { name: "订单管理" },
      ],
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

子组件

<template>
  <div>
    <template v-if="!item.children">
      <el-menu-item :index="item.name">
        {{ item.name }}
      </el-menu-item>
    </template>
    <el-submenu :index="item.name" v-else>
      <template slot="title">
        {{ item.name }}
      </template>
      <submenu-item
        v-for="(v, i) in item.children"
        :key="v.name + i"
        :item="v"
        :base-path="v.name" 
      />
    </el-submenu>
  </div>
</template>
<script>
export default {
  name: "submenuItem",
  data() {
    return {};
  },
  props: {
    item: {
      typeof: Object,
      default: () => {},
    },
    // base-path 传参数多余的东西
    basePath: {
      type: String,
      default: "",
    },
  },
};
</script>