vue、element-ui 依權限動態導航 v-for、v-if

 

在管理后台需要按用戶權限展示不同導航菜單時，我們需要從后端請求數據來進行菜單渲染。

但由於v-for與v-if不能在同一標簽內使用（存在性能問題：v-for 具有比 v-if 更高的優先級，意味着 v-if 將分別重復運行於每個 v-for 循環中），所以我們需要將其分別放在不同標簽內，v-for放在父級，v-if放在子級。

同時，由於使用實體實體標簽作為v-for載體，將會影響el-menu的list結構，因此，我們將v-for放在template標簽中。

代碼如下（以三級菜單為例）：

html

  <el-menu>
      <div class="side-bar-title">后台管理</div>
      <template v-for="menu_0 in menuData">
        <el-submenu v-if="menu_0.childMenu" :index="menu_0.id" :key="menu_0.id">
          <template slot="title">{{menu_0.name}}</template>
          <template v-for="menu_1 in menu_0.childMenu">
            <el-submenu v-if="menu_1.childMenu" :index="menu_1.id" :key="menu_1.id">
              <template slot="title">{{menu_1.name}}</template>
              <template v-for="menu_2 in menu_1.childMenu">
                <el-menu-item :index="menu_2.url" :key="menu_2.id">{{menu_2.name}}</el-menu-item>
              </template>
            </el-submenu>
            <el-menu-item v-else :index="menu_1.url" :key="menu_1.id">{{menu_1.name}}</el-menu-item>
          </template>
        </el-submenu>
        <el-menu-item v-else :index="menu_0.url" :key="menu_0.id">{{menu_0.name}}</el-menu-item>
      </template>
   </el-menu>

js

export default {
  data () {
    return {
      menuData: [
    　　{
         name: "一級導航-1",
 　　　　 id: "1",
         parentId: 0, 
　　　　  url: "comment1",
         childMenu:[
          {
　　　　　　  id: "3",
　　　　　　  name: "二級導航",
　　　　　　  parentId: 1,
　　　　　　  url: "comment3",
　　　　　　  childMenu:[
　　　　　　　　{
　　　　　　　　  id: "4",
　　　　　　　　  name: "三級導航",
　　　　　　　　  parentId: 3,
　　　　　　　　　url: "comment4"
　　　　　　　　}]
　　　　　　}],
　　　　　},{
　　　　　　id: "2"
　　　　　　name: "一級導航-2"
　　　　　　parentId: 0
　　　　　　url: "comment2"
　　　　　}]
　　　}
  }
}