AntDesign vue学习笔记（五）导航菜单动态加载

通常的后台系统都有一个树形导航菜单，具体实现以下，主要参考
https://my.oschina.net/u/4131669/blog/3048416

"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",
        }
    ]

 

一、定义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>

template functional标志该组件为函数化组件

二、在Mainfrm中引入组件

import SubMenu from './SubMenu'
components: {
SubMenu
}

 

三、menu模板

<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>

四、axios获取并显示实现代码

    getmenu () {
      let that = this
      this.axios(
        {
          method:"get",
          url:'/api/getmenu', 
          headers: {
            'Content-Type':'application/json;charset=UTF-8'
          }
        })
        .then((response) => {
          this.menus=response.data.data;
          console.log(response)
        })
        .catch(function (error) {
          console.log(error)
        })
  },

五、menus在data中定义

data () {
    return {
      menus:[]
    }
  },

 六、最终实现效果以下(加了一些菜单和修改了一些图标和定义的有点不同)

总结:使用过程当中碰到一个问题就是这个子组件里写@click事件好比@click="alert('a')"不起做用，还报错 _vm.alert is not a function，暂时没搞明白缘由，若是使用最高替换成<a>标签。

地址：https://www.jianshu.com/p/c549c3d0f595这篇文章的递归方法点击事件显示是正常的，他这个用的是原生html元素，须要美化界面，代码以下

list: [
{
    "id": "1",
    "menuName": "项目管理",
    "childTree": [{
        "menuName": "项目进度",
        "childTree": [{
            "menuName": "项目一",
            "childTree": [{ "menuName": "详细信息" }]
        }]
    }, {
        "menuName": "任务安排"
    }]
}, 
{
    "id": "2",
    "menuName": "数据统计"
}, 
{
    "id": "3",
    "menuName": "人员管理"
}]

// 子组件代码
<template>
    <li>
        <span @click="toggle">
            {{ model.menuName }}
        </span>
        <ul v-if="isFolder" v-show="open">
            <items v-for="(item, index) in model.childTree" :model="item" :key="index"></items>
        </ul>
    </li>
</template>

<script type="text/javascript">
    export default {
        // 组件递归必要条件，name属性
        name: 'items',
        props: ['model'],
        data() {
            return {
                // 控制子列表的显示隐藏
                open: false
            }
        },
        computed: {
            // 是否还有子列表须要渲染，做为v-if的判断条件
            isFolder() {
                return this.model.childTree && this.model.childTree.length
            }
        },
        methods: {
            // 切换列表显示隐藏的方法
            toggle() {
                if(this.isFolder) {
                    this.open = !this.open
                }
            },
        }
    }
</script>

<template>
    <div>
        <ul>
            <items v-for="(model, index) in list" :model="model" :key="index"></items>
        </ul>
    </div>
</template>

<script type="text/javascript">
    components: {
        Items
    },
    data() {
        return {
            list: ...
        }
    }
</script>