vue、element-ui 依权限动态导航 v-for、v-if

时间:2021-02-04 田冬雪人气:2

在管理后台需要按用户权限展示不同导航菜单时，我们需要从后端请求数据来进行菜单渲染。

但由于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>

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

加载全部内容