element-ui中导航组件menu的一个属性:default-active说明

Element UI 是一款基于 Vue 2.0 的桌面端组件库，在其中导航组件 menu 是常用的菜单导航组件之一。该组件有一个属性：default-active，本文将详细讲解该属性。

属性说明

首先，我们来看该属性的官方说明。

default-active 属性可以用来设置默认激活的菜单项，它接收一个字符串类型的 index 值，默认值为 ''。

该属性在菜单渲染完成后，会自动将默认的菜单项激活。

示例说明

下面，我们通过两个简单的示例，来说明该属性的使用方法。

示例一

首先，在 HTML 页面中引入必要的文件：

<!-- 引入 CSS 样式 -->
<link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css">

<!-- 引入 Vue.js -->
<script src="//unpkg.com/vue/dist/vue.js"></script>

<!-- 引入 Element UI 组件库 -->
<script src="//unpkg.com/element-ui/lib/index.js"></script>

然后，在 Vue 实例中使用导航菜单组件，并设置默认激活的菜单项：

<template>
  <div>
    <el-menu default-active="2">
      <el-menu-item index="1">菜单项一</el-menu-item>
      <el-menu-item index="2">菜单项二</el-menu-item>
      <el-menu-item index="3">菜单项三</el-menu-item>
    </el-menu>
  </div>
</template>

在上面的代码中，我们通过 default-active="2" 的方式将菜单项二设置为默认激活的菜单项。

示例二

除了直接在 Vue 实例中设置 default-active 属性外，我们还可以通过绑定数据的方式动态设置默认激活的菜单项。

首先，在 Vue 实例中定义一个 data 对象，并在其中设置默认的激活菜单项：

data: {
  activeIndex: '2', // 设置默认激活的菜单项
},

然后，在导航菜单组件中，将 default-active 属性绑定到上述 data 对象的属性上：

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

在上面的代码中，我们使用 :default-active 的方式将 default-active 属性绑定到了 activeIndex 这个 data 对象的属性上，从而实现了动态设置默认激活的菜单项的功能。

总结

通过上述示例，我们知道了 default-active 属性的基本使用方法，可以将该属性直接设置为一个字符串类型的 index 值，也可以通过动态绑定的方式实现动态设置默认激活菜单项的功能。掌握了这个属性的用法，我们可以更灵活地使用 Element UI 的导航菜单组件，从而实现更丰富的页面导航效果。