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>