Element-Ui组件 NavMenu 导航菜单的具体使用

Element-Ui组件 NavMenu 导航菜单的具体使用攻略

1. 导航菜单简介

NavMenu 是 Element-Ui 中提供的导航菜单组件，它可以方便地创建具有层级结构的菜单栏。NavMenu 支持子菜单的展开和折叠，使用户能够方便地进行导航和快速切换。

2. 导航菜单的基本用法

NavMenu 组件的基本用法如下：

<template>
  <el-menu>
    <!-- 导航菜单项 -->
    <el-menu-item index="1">菜单项1</el-menu-item>
    <el-menu-item index="2">菜单项2</el-menu-item>

    <!-- 含有多个子菜单的导航菜单项 -->
    <el-submenu index="3">
      <template slot="title">菜单项3</template>
      <el-menu-item index="3-1">子菜单1</el-menu-item>
      <el-menu-item index="3-2">子菜单2</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

在上述代码中，我们使用了 el-menu-item 和 el-submenu 组件来创建菜单项和子菜单。其中，index 属性用于指定每个菜单项的唯一标识，以便在选择菜单项时进行标识。

3. 导航菜单的高级用法

3.1 动态生成菜单

我们可以通过 v-for 指令来动态生成菜单项，实现根据数据自动生成菜单的功能。以下是一个示例：

<template>
  <el-menu>
    <!-- 动态生成菜单项 -->
    <el-menu-item v-for="item in menuList" :key="item.index" :index="item.index">{{ item.name }}</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        { index: "1", name: "菜单项1" },
        { index: "2", name: "菜单项2" },
        { index: "3", name: "菜单项3" }
      ]
    };
  }
};
</script>

在上述代码中，我们通过 v-for 指令遍历 menuList 数组来动态生成菜单项，实现了根据数据自动生成菜单的功能。

3.2 设置默认选中菜单项

我们可以通过 default-active 属性来设置默认选中的菜单项。以下是一个示例：

<template>
  <el-menu :default-active="activeIndex">
    <el-menu-item index="1">菜单项1</el-menu-item>
    <el-menu-item index="2">菜单项2</el-menu-item>
    <el-menu-item index="3">菜单项3</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "2" // 默认选中菜单项的 index
    };
  }
};
</script>

在上述代码中，我们通过 :default-active 属性绑定 activeIndex 数据来设置默认选中的菜单项。通过修改 activeIndex 的值，可以实现动态修改默认选中菜单项的效果。

4. 总结

以上就是对 Element-Ui 组件 NavMenu 导航菜单的具体使用攻略的介绍。在基本用法中，我们可以通过 el-menu-item 和 el-submenu 来创建菜单项和子菜单。在高级用法中，我们可以动态生成菜单和设置默认选中菜单项。希望这些示例能够帮助您更好地使用 Element-Ui 的 NavMenu 组件。如果有任何问题，请随时提问。