使用elementui-navmenu实现三级菜单

昨天有需求使用 Elementui 的 navmenu 来实现一个三级菜单

我使用的数据格式 一级菜单下有二级菜单，有些二级菜单可能没有三级菜单

[
    {
        children:[
            children:[
                id:"",
                data:{},
                label:""
            ],
            id:"",
            data:{},
            label:""
        ],
        id:"",
        data:{},
        label:""
    },
    {
        children:[
            children:[
                id:"",
                data:{},
                label:""
            ],
            id:"",
            data:{},
            label:""
        ],
        id:"",
        data:{},
        label:""
    }
]

在确定是三级菜单的前提下没有使用递归的方法（太菜了搞不懂递归 哈哈哈）

下面是用navmenu实现的三级菜单

<el-menu>
  <!-- 循环树数组 -->
  <template v-for="node in treeData">
    <!-- 判断一级节点是否有children子节点-->
    <!-- 一级菜单有子节点 则一级菜单为submenu -->
    <template v-if="isHasChild(node)">
      <el-submenu :key="node.id" :index="node.id">
        <template slot="title"><span>{{node.label}}</span></template>
        <!-- 循环一级菜单的子节点--二级菜单 -->
        <template v-for="child in node.children">
          <!-- 判断二级菜单是否有children子节点 -->
          <!-- 二级菜单有子节点 则二级菜单为submenu -->
          <template v-if="isHasChild(child)">
            <el-submenu :key="child.id" :index="child.id">
              <template slot="title"><span>{{child.label}}</span></template>
              <!-- 循环二级菜单的的子节点 三级菜单项 -->
              <el-menu-item v-for="grandson in child.children" :key="grandson.id" :index="grandson.id" @click="getInfo(grandson.id)">
                <span style="display:block;width:95%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis" :title="grandson.label">{{grandson.label}}</span>
              </el-menu-item>
            </el-submenu>
          </template>
          <!-- 二级菜单无子节点 则二级菜单为menu-item -->
          <template v-else>
            <el-menu-item :key="child.id" :index="child.id" @click="getInfo(child.id)">
              <span style="display:block;width:95%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis" :title="child.label">{{child.label}}</span>
            </el-menu-item>
          </template>
        </template>
      </el-submenu>
    </template>
    <!-- 一级菜单没有子节点 则一级菜单为menu-item -->
    <template v-else>
      <el-menu-item :key="node.id" :index="node.id" @click="getInfo(node.id)">
        <span style="display:block;width:95%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis" :title="node.label">{{node.label}}</span>
      </el-menu-item>
    </template>
  </template>
</el-menu>

el-menu-item 中的 span 的 style 是为了长度过长时添加...省略号并且在鼠标悬停时显示完整信息

使用到的isHasChild方法

// 判断节点是否有子节点
isHasChild(node){
  if (node.children) {
    return true
  }else{
    return false
  }
}