一劳永逸！Vue3使用el-menu多级菜单出现点击一个全部展开的完美解决方案

前端

2022-11-07 19:40:32

解决 Vue3 中 el-menu 多级菜单全部展开的问题

在 Vue3 中使用 el-menu 多级菜单时，您可能会遇到一个常见问题：当您点击一个菜单项时，其子菜单也会自动展开。对于某些用户体验场景来说，这可能是一个问题，因为您可能只希望在将鼠标悬停在菜单项上时才展开子菜单。

问题原因

导致这个问题的原因是 el-menu 的默认展开策略。当您点击一个菜单项时，它会使用 expand-on-click 属性，该属性默认设置为 true，这意味着点击菜单项时将展开其所有子菜单。

解决方案

要解决此问题，您可以通过设置 expand-on-click 属性为 false 来修改 el-menu 的展开策略。这样做将阻止在点击菜单项时展开其子菜单。

代码示例

以下代码示例演示了如何设置 expand-on-click 属性：

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :collapse="isCollapse" @select="handleSelect">
  <el-menu-item index="1">
    首页
  </el-menu-item>
  <el-sub-menu index="2">
    <template #title>
      产品
    </template>
    <el-menu-item index="2-1">
      产品1
    </el-menu-item>
    <el-menu-item index="2-2">
      产品2
    </el-menu-item>
  </el-sub-menu>
  <el-menu-item index="3">
    关于我们
  </el-menu-item>
</el-menu>

export default {
  data() {
    return {
      activeIndex: '1',
      isCollapse: false,
    };
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
    },
  },
};