vue el-menu default-active 设置变量

你可以使用 `v-model` 指令来绑定 `default-active` 属性的值。在 Vue 中，你可以使用 data 属性来定义一个变量，并将该变量与 `v-model` 指令绑定，从而更新 `default-active` 属性的值。

例如，你可以这样定义一个变量：

data() {
  return {
    activeIndex: '1'
  }
}

然后将该变量与 `v-model` 指令绑定：

<el-menu default-active="1" v-model="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>

这样，当用户点击菜单项时，`activeIndex` 的值会更新，从而更新 `default-active` 属性的值，使相应的菜单项处于激活状态。

相关问题

vue3 如何将el-menu按条件展开

要按条件展开 Vue3 的 el-menu，可以使用 v-model 绑定 el-menu 的展开状态，并且在绑定的属性中设置一个变量，来控制 el-menu 的展开状态。例如：

<template>
  <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" v-model="isCollapsed">
    <el-submenu index="1">
      <template #title>
        <i class="el-icon-location"></i>
        <span>导航一</span>
      </template>
      <el-menu-item-group>
        <template #title>分组一</template>
        <el-menu-item index="1-1">选项1</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="分组2">
        <el-menu-item index="1-3">选项3</el-menu-item>
      </el-menu-item-group>
      <el-submenu index="1-4">
        <template #title>选项4</template>
        <el-menu-item index="1-4-1">选项4-1</el-menu-item>
      </el-submenu>
    </el-submenu>
    <el-menu-item index="2">
      <i class="el-icon-menu"></i>
      <span>导航二</span>
    </el-menu-item>
    <el-menu-item index="3">
      <i class="el-icon-setting"></i>
      <span>导航三</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'MenuDemo',
  setup() {
    const isCollapsed = ref(false); // 控制 el-menu 的展开状态
    const activeIndex = ref('1-1'); // 控制 el-menu 默认选中项

    return {
      isCollapsed,
      activeIndex,
    };
  },
};
</script>

在这个示例中，我们使用了 ref 创建了一个名为 isCollapsed 的变量，并将其绑定到了 el-menu 的 v-model 属性上，这样就可以通过修改 isCollapsed 的值来控制 el-menu 的展开状态了。最后，我们将 isCollapsed 变量返回给模板中使用。

vue3中取消el-menu的选中状态

在 Vue 3 中，可以通过 `v-model` 和 `default-active` 属性来控制 `el-menu` 的选中状态。

如果要取消 `el-menu` 的选中状态，可以将 `v-model` 绑定的值设置为 `null` 或者空字符串，或者将 `default-active` 属性设置为 `null` 或者空字符串。

示例代码如下：

<template>
  <el-menu v-model="activeIndex" :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>
  <button @click="cancelSelection">取消选中</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const activeIndex = ref('1');

    const cancelSelection = () => {
      activeIndex.value = null; // 或者 ''
    };

    return {
      activeIndex,
      cancelSelection,
    };
  },
};
</script>

在上面的代码中，我们使用 `ref` 定义了一个响应式变量 `activeIndex`，并将其绑定到 `el-menu` 的 `v-model` 和 `default-active` 属性上。`cancelSelection` 方法可以将 `activeIndex` 的值设置为 `null` 或者空字符串，从而取消 `el-menu` 的选中状态。