el-menu的default-openeds

霂沁

于 2024-07-23 22:15:45 发布

阅读量430

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/qq_41646185/article/details/140647445

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

el-menu的default-openeds为响应式数据时不生效

原因：在el-menu组件渲染后设置default-openeds

一般项目中，会统一获取全部当前用户的可访问菜单，将需要默认展开的菜单预先处理成数组，设置到default-openeds，再渲染el-menu组件

<el-menu
  v-if="openeds.length > 0"
  :default-active="activeIndex"
  mode="vertical"
  :default-openeds="openeds"
  >
  <!-- .... -->
</el-menu>

const openeds = computed(() => {
  const set = new Set<string>();
  Object.values(menuStore.leftMenuMap).map((menu: Array<Record<string, string>>) =>
    menu
    .filter((menuItem) => size(menuItem.childs) > 0)
    .map((menuItem) => {
      set.add(menuItem.route);
    }),
  );
  return [...set];
});