el-menu导航三级数据结构及数据展示

1:数据展示

bash 复制代码
       <el-col>
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          router
          unique-opened
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <div v-for="item in routers" :key="item.name">
            <el-submenu v-if="item.key" :index="item.url">
              <template slot="title">
                <i :class="item.icon" />
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item v-for="val in item.son" :key="val.name" 
              :index="val.url" v-if="!val.son">
                <template slot="title">
                  <i class="icon iconfont">*</i>
                  <span>{{ val.name }}</span>
                </template>
              </el-menu-item>
              <!--    三级菜单          -->
              <div v-for="i in item.son"  v-if="item.son">
              <el-submenu v-if="i.key" :index="i.url">
                <template slot="title">
                  <i :class="i.icon" />
                  <span>{{ i.name }}</span>
                </template>

                <el-menu-item v-for="v in i.son"   
                  :key="v.name":index="v.url" v-if="i.son">
                  <template slot="title">
                    <i class="icon iconfont">*</i>
                    <span>{{ v.name }}</span>
                  </template>
                </el-menu-item>
              </el-submenu>
              </div>

            </el-submenu>
            <el-menu-item v-else :index="item.url">
              <template slot="title">
                <i :class="item.icon" />
                <span>{{ item.name }}</span>
              </template>
            </el-menu-item>
          </div>
        </el-menu>
      </el-col>

2:数据结构

bash 复制代码
data() {
    return {
      /* 这里是拿到后端返回的数据*/
      routers:[
        {
          key: true,
          name:'产品',
          son:[
            {
              key: true,
              name:'自研产品',
              son:[
                {
                  key: true,
                  name:'房型',
                  url:'/ctrip/roomType'
                },
                {
                  key: true,
                  name:'房价码',
                  url:'/ctrip/roomRateCode'
                }
              ],
              url:0
            },
            {
              key: true,
              name:'房型',
            }
          ],
          url:0
        }
      ]
相关推荐
然我几秒前
闭包在类封装中的神技:实现真正安全的私有属性,面试必懂的封装技巧
前端·javascript·面试
小公主几秒前
别再用 props 一层层传了!React useContext 真正用法与 useState 深度解析
前端·react.js
用户名1232 分钟前
Vue 页面快速跳转并打开源代码文件
javascript
帅夫帅夫2 分钟前
深入理解 JavaScript 的 const:从基础到内存原理
前端
用户名1233 分钟前
我写了个脚本,让前端彻底告别 Swagger 手动搬砖
前端
爱编程的喵5 分钟前
深入理解JavaScript节流函数:从原理到实战应用
前端·javascript·html
尧木晓晓5 分钟前
开发避坑指南:Whistle 代理失效背后,localhost和 127.0.0.1 的 “爱恨情仇” 与终极解决方案
前端·javascript
风无雨38 分钟前
GO启动一个视频下载接口 前端可以边下边放
前端·golang·音视频
Rainbow_Pearl42 分钟前
Vue2_element 表头查询功能
javascript·vue.js·elementui
aha-凯心1 小时前
前端学习 vben 之 axios interceptors
前端·学习