Vue中动态创建element-ui组件的实现

在项目中想要通过获取到的数据,然后动态创建element-ui的导航栏,如何实现呢,下面是本人实现后的过程。

梳理代码逻辑
循环我们所获取到的数据,并且判断该数据是否有子数据,如果有子数据,则输出下拉样式;如果没有,则直接输出el-menu-item。基本逻辑思想如下:

v-for    遍历当前第一层级数据
  |-- v-if  第一层级数据包含子数据
    |-- v-for	遍历第二层数据
       |-- v-if		第二层数据包含子数据
          |-- v-for     遍历第三层数据数据
              |-- v-if      第三层数据不再包含子数据
                 输出下拉菜单样式
              |-- v-else
       |-- v-else
        
  |-- v-else

组织代码

<template v-for="item in item.children">                          <!-- 1 v-for -->
   <template v-if="item.children && item.children.length>0">      <!--1 v-if -->
     <template v-for="item in item.children">                     <!--2 v-for -->
        <template v-if="item.children && item.children.length>0">  <!--2 v-if -->
           <template v-for="item in item.children">               <!--3 v-for -->
                  直接结束,如果你还有,则继续增加
           </template>                                            <!--over 3 v-for -->
          </template>                                             <!--over 2 v-if -->
          <template v-else></template> 
        </template>                                               <!--over 2 v-for -->
      </template>                                                 <!--over 1 v-if -->
    <template v-else></template> 
  </template>                                                     <!--over 1 v-for -->

具体实现代码
测试使用的数据:

contentNav: [{
            name: "世界文化遗产",
            index: "1",
            childNode: [{
                name: "世界文化遗产1-1",
                index: "1-1"
              },
              {
                name: "世界文化遗产1-2",
                index: "1-2"
              },
            ]
          },
          {
            name: "古遗址",
            index: "2",
          }
          ]

实现的代码逻辑:

<el-menu :collapse="true">
      <template v-for="item in contentNav">          //遍历当前数组
        <template v-if="item.childNode && item.childNode.length>0">    //判断当前数组是否存在子节点
          <el-submenu :index="item.index">     //如果存在子节点,则创建一个子导航组件el-submenu
            <template slot="title">            //设置当前子导航组件的名称
              {{item.name}}
            </template>
            <el-menu-item-group>              //创建子导航栏组el-menu-item-group
              <template v-for="content in item.childNode"> //遍历子节点数据,在子导航栏组中创建导航菜单
                <el-menu-item :index="content.index">{{content.name}}</el-menu-item>
              </template>
            </el-menu-item-group>
          </el-submenu>
        </template>
        <template v-else> //如果当前数据不存在子节点数据
          <el-menu-item :index="item.index">{{item.name}}</el-menu-item>//直接创建导航菜单
        </template>
      </template>
    </el-menu>

以上就是动态创建组件的实现过程。

你可能感兴趣的:(Vue)