关于element ui的菜单default-active默认选中的问题

关于element ui的菜单default-active默认选中的问题:

1. 理解 default-active 属性

default-active 属性是 Element UI 中菜单组件 el-menu 的一个选项，作用是设置菜单默认选中的项。使用该属性时，只需将需要默认选中的菜单项的 index 值设置给 default-active 即可。

例如：

<el-menu default-active="1">
  <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 的值为 1，所以菜单组件 el-menu 初次渲染时，选项一即为默认选中项。

2. 动态设置 default-active 属性

在某些情况下，需要根据实际需求动态设置菜单的默认选中项，可以使用 default-active.sync 来实现双向绑定 default-active 属性值。

例如：

<el-menu :default-active.sync="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.sync 绑定了一个变量 activeIndex，通过动态修改 activeIndex 的值，即可改变菜单的默认选中项。

// 在 vue 组件内部的 script 中
data() {
  return {
    activeIndex: '2' // 默认选中第二项
  }
},

methods: {
  handleChange(item) {
    this.activeIndex = item.index
  }
}

在上述代码中，通过监听菜单组件 el-menu 的 select 事件，修改 activeIndex 的值，即可动态修改默认选中项。

注意：default-active.sync 只能在 Vue 组件中使用，如果在普通 HTML 中使用，需要使用 v-bind:default-active 来实现属性绑定。

总结：

以上就是关于 Element UI 的菜单默认选中项 default-active 属性的介绍。只需要通过设置 default-active 或者 default-active.sync 属性就可以轻松实现菜单的默认选中项，如果需要动态修改选中项，则可以通过监听菜单组件 el-menu 的 select 事件，实现 default-active 属性的动态绑定。