vue+antdesign导航菜单动态加载

最新推荐文章于 2024-07-13 23:07:43 发布

weixin_33857679

最新推荐文章于 2024-07-13 23:07:43 发布

阅读量9k

点赞数

文章标签： javascript python json ViewUI

原文链接：https://my.oschina.net/u/4131669/blog/3048416

版权

2019独角兽企业重金招聘Python工程师标准>>>

antdesign侧边栏菜单，需根据后台返回的数据动态加载菜单列表，在循环填充时会遇到子菜单项<a-sub-menu>拆分问题，查阅官方文档，在单文件递归菜单中，使用函数式组件递归生成菜单

 "menuList": [
        {
            "name": "监控系统",
            "url": "http://192.168.1.100:9999",
            "iconType": "laptop",
        },
        {
            "name": "模块接口",
            "url": null,
            "iconType": "bars",
            "sidebars": [
                {
                    "name": "订单模块",
                    "url": "http://192.168.1.100:8890//swagger-ui.html",
                    "iconType": "italic",
                    "children": []
                }
            ]
        },
        {
            "name": "关于",
            "url": "http://192.168.1.100:9999/about",
            "iconType": "info",
        }
    ]

根据上述后台传递的json数组，主组件中代码如下：

<template v-for="item in menuList">
  <a-menu-item v-if="!item.sidebars.length" :key="item.name">
     <a-icon :type="item.iconType" />
        <span>{{item.name}}</span>
  </a-menu-item>
  <sub-menu v-else :menu-info="item" :key="item.name"/>
</template>

其中的<sub-menu>由子组件定义，如下：

<template functional>
  <a-sub-menu
    :key="props.menuInfo.name"
  >
    <span slot="title">
      <a-icon :type="props.menuInfo.iconType" /><span>{{ props.menuInfo.name }}</span>
    </span>
    <template v-for="item in props.menuInfo.sidebars">
      <a-menu-item
        :key="item.name"
      >
        <span>{{ item.name }}</span>
      </a-menu-item>
      
    </template>
  </a-sub-menu>
</template>
<script>
export default {
  props: ['menuInfo'],
};
</script>

在<sub-menu>源文件中

<template functional>
  <a-sub-menu
    :key="props.menuInfo.key"
  >
    <span slot="title">
      <a-icon type="mail" /><span>{{ props.menuInfo.title }}</span>
    </span>
    <template v-for="item in props.menuInfo.children">
      <a-menu-item
        v-if="!item.children"
        :key="item.key"
      >
        <a-icon type="pie-chart" />
        <span>{{ item.title }}</span>
      </a-menu-item>
      <sub-menu
        v-else
        :key="item.key"
        :menu-info="item"
      />
    </template>
  </a-sub-menu>
</template>
<script>
export default {
  props: ['menuInfo'],
};
</script>

其中的<sub-menu>中还包含递归组件

转载于:https://my.oschina.net/u/4131669/blog/3048416