vue+Ant design后台系统左侧菜单动态生成

﹏ヽ暗。殇╰゛Y 2022-12-22 09:57 350阅读 0赞

### 1、Menu ###

入门一般先来个导航栏，咱用Antd的Menu组件

官方会给你一组写好的死数据的实例，但是在项目中我们一般写成动态。

vue中写动态数据，方便的亚批，不仅代码优美，还简洁易读。

HTML:

<a-menu @click="navClick"
                    style="width: 256px"
                    v-model="currentSelectChild"
                    @openChange="onOpenChange"
                    :openKeys="currentParent"
                    theme="dark"
                    mode="inline">
                
                
                
                <a-sub-menu v-for="itParent in NavData" :key="itParent.NavID">
                    <span slot="title">
                        <a-icon :type="itParent.Icons" />
                        <span>{
       {itParent.Title}}</span>
                    </span>
                    <a-menu-item v-for="itChild in itParent.Child" :key="itChild.NavID">
                        <router-link :to="itChild.Path">
                            {
       {itChild.Title}}
                        </router-link>
                    </a-menu-item>
                </a-sub-menu>
         </a-menu>

数据格式：

NavData: [
                        {
                            NavID: 100,
                            Icons:"dashboard",
                            Title:"操作",
                            Path:"",
                            Child: [
                                {
                                    NavID: 101,
                                    Icons: "",
                                    Title: "用户",
                                    Path: "/UserInfo",
                                }, {
                                    NavID: 102,
                                    Icons: "",
                                    Title: "公司",
                                    Path: "/CompanyInfo",
                                },{
                                    NavID: 103,
                                    Icons: "",
                                    Title: "部门",
                                    Path: "/TeamInfo",
                                },
     
                            ]
                        },{
                            NavID: 300,
                            Icons:"audit",
                            Title:"报表",
                            Path:"",
                            Child: [{
                                    NavID: 301,
                                    Icons: "",
                                    Title: "打卡",
                                    Path: "/Card",
                                }]
                        }
            ]