1. <template>
    2. <div>
    3.         <el-menu :collapse="Collapse" :collapse-transition="false" unique-opened>
    4.         <template v-for="item in MenuList">
    5.             <el-menu-item
    6.               v-if="!item.Children"
    7.               :index="item.Path"
    8.               v-permission="{'role':item.Auth,'auth':Auth}"
    9.               :key="item.Path"
    10.             >
    11.               <i class="iconfont fa-el-icon" :class="item.Icon"></i>
    12.               <span slot="title">{{item.Name}}</span>
    13.             </el-menu-item>
    14.             <el-submenu
    15.               v-else
    16.               :index="item.Path"
    17.               v-permission="{'role':item.Auth,'auth':Auth}"
    18.               :key="item.Path"
    19.             >
    20.               <template slot="title">
    21.                 <i class="iconfont fa-el-icon" :class="item.Icon"></i>
    22.                 <span slot="title">{{item.Name}}</span>
    23.               </template>
    24.               <template v-for="child in item.Children">
    25.                 <el-menu-item
    26.                   v-if="!child.Children"
    27.                   :index="child.Path"
    28.                   v-permission="{'role':child.Auth,'auth':Auth}"
    29.                   :key="child.Path"
    30.                 >
    31.                   <i class="iconfont fa-el-icon" :class="child.Icon"></i>
    32.                   <span slot="title">{{child.Name}}</span>
    33.                 </el-menu-item>
    34.                 <el-submenu
    35.                   v-else
    36.                   :index="child.Path"
    37.                   v-permission="{'role':child.Auth,'auth':Auth}"
    38.                   :key="child.Path"
    39.                 >
    40.                   <template slot="title">
    41.                     <i class="iconfont fa-el-icon" :class="child.Icon"></i>
    42.                     <span slot="title">{{child.Name}}</span>
    43.                   </template>
    44.                   <template v-for="grandson in child.Children">
    45.                     <el-menu-item
    46.                       :index="grandson.Path"
    47.                       v-permission="{'role':grandson.Auth,'auth':Auth}"
    48.                       :key="grandson.Path"
    49.                     >
    50.                       <i class="iconfont fa-el-icon" :class="grandson.Icon"></i>
    51.                       <span slot="title">{{grandson.Name}}</span>
    52.                     </el-menu-item>
    53.                   </template>
    54.                 </el-submenu>
    55.               </template>
    56.             </el-submenu>
    57.           </template>
    58.         </el-menu>
    59. </div>
    60. </template>
    61. <script>
    62.  var menu = [{
    63.   Name: "首页",
    64.   Icon: "el-icon-menu",
    65.   Path: "/index",
    66.   Auth: ["index"],
    67.   Children: [{
    68.     Name: "首页1",
    69.     Path: "/index/1",
    70.     Auth: ["index"]
    71.   }]
    72. }, {
    73.   Name: "管理",
    74.   Path: "/manger",
    75.   Icon: "el-icon-menu",
    76.   Auth: ["article", "news"],
    77.   Children: [{
    78.     Name: "管理文章",
    79.     Path: "/manger/article",
    80.     Auth: ["article"]
    81.   }, {
    82.     Name: "管理新闻",
    83.     Path: "/manger/news",
    84.     Auth: ["news"]
    85.   }]
    86. }];
    87.    export default {
    88.         data(){
    89.         return {
    90.         MenuList: menu,
    91.           Collapse: false,
    92.           Auth: ["article"]
    93.       }
    94.     },
    95.     directives: {
    96.       permission: function permission(el, bind) {
    97.         let status = false;
    98.         for (var index = 0; index < bind.value.role.length; index++) {
    99.           var element = bind.value.role[index];
    100.           if (bind.value.auth.includes(element)) {
    101.             console.log(element);
    102.             status = true;
    103.             break;
    104.           }
    105.         }
    106.         if (!status) {
    107.           el.remove();
    108.         }
    109.       }
    110.       }
    111.     }
    112. </script>

    domo:https://codepen.io/lzq920/pen/OqOZPG