递归菜单 angular 与 vue3

最新推荐文章于 2024-08-16 18:15:23 发布

凤凰涅檠

最新推荐文章于 2024-08-16 18:15:23 发布

阅读量148

点赞数

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

本文链接：https://blog.csdn.net/ch_weni/article/details/130682369

版权

vue3 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

angular

4 篇文章 0 订阅

订阅专栏

文章展示了在Angular中使用ngTemplateOutlet进行模板插值和递归渲染菜单项，以及在Vue3中通过v-for和子组件(sub-menu)实现递归菜单。两种实现方式都涉及到条件渲染和数据遍历，用于构建多级菜单结构。

摘要由CSDN通过智能技术生成

ng版本：

关键代码：

<ng-container *ngTemplateOutlet="menuItemNode; context: {menus_:menus}"></ng-container>

<ng-template #menuItemNode let-theMenus="menus_">
  <ng-container *ngFor="let menu of theMenus">
    <li *ngIf='!menu.children || menu.children.length==0'>
      <span>
        <i></i>
        <span>{{menu.name}}&nbsp;</span>
      </span>
    </li>
    <li *ngIf="menu.children && menu.children.length!=0">
      <span>
        <i></i>
        <span>{{menu.name}}&nbsp;</span>
      </span>
      <ul style="padding-left: 45px">
        <ng-container *ngTemplateOutlet="menuItemNode; context: {menus_:menu.children}"></ng-container>
      </ul>
    </li>
  </ng-container>
</ng-template>

vue3版本：

关键代码：

sub.vue

<template>
  <template v-for="(item, index) of data ?? []" :key="index">
    <a-sub-menu v-if="item.children && item.children.length" :key="item.key">
      <template #title>
        <span>{{ item.title }}</span>
      </template>
      <sub-menu :data="item.children"></sub-menu>
    </a-sub-menu>
    <a-menu-item v-else @click="log(item)" :key="'link-'+item.key">
      <span>{{ item.title }}</span>
    </a-menu-item>
  </template>
</template>

<script lang="ts">
  /** 递归菜单 */
  export default {
    name: 'sub-menu'
  };
</script>

<script lang="ts" setup>
  import { message } from 'ant-design-vue';

  const props = defineProps<{ data?: Array<any> }>();

  const log = (item) => {
    message.info(JSON.stringify(item));
  };
</script>

parent.vue

<template>
  <div class="s-leftbar">
    <a-menu :multiple="false" v-model:openKeys="vm.openKeys" v-model:selectedKeys="vm.selectedkeys" mode="inline" @click="handleClick" @openChange="onOpenChange">
      <sub-menu :data="vm.menus"></sub-menu>
    </a-menu>
  </div>
</template>

<script setup lang="ts">
  import SubMenu from './sub.vue';
  import { reactive, ref, toRefs, watch } from 'vue';
  import { useRoute } from 'vue-router';

  const vm = reactive({
    menus: [],
    openKeys: [], //默认展开
    selectedkeys: []
  });

  vm.menus = [
    {
      key: 1,
      title: '机组分析',
      children: [{ key: 101, title: '基本面分析', children: [{ key: 10101, title: '披露信息展示' }] }]
    },
    {
      key: 2,
      title: '数据管理',
      children: [{ key: 201, title: '电厂机组数据' }]
    }
  ];

  // 菜单事件
  const handleClick = ({ item, key, keyPath }) => {};

  const onOpenChange = (openKeys: string[]) => {};
</script>