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
        }
      ]
相关推荐
拾光拾趣录1 分钟前
组件封装的⼀些基本准则
前端·前端工程化
CAD老兵2 分钟前
TypeScript 中如何转换两个具有相同值的枚举类型?
前端
别跟老夫聊头发5 分钟前
vue缩放/放大时,实时更新/变换显示高度
vue.js
1024小神6 分钟前
Cocos游戏开发中,检测两个物体碰撞,并实现物理反弹逻辑
前端·javascript
拾光拾趣录8 分钟前
Vue Router 执行顺序
前端·vue.js·vue-router
前端权8 分钟前
Vue3 多行文本溢出隐藏与展开收起功能实现总结
前端·vue.js
用户3802258598249 分钟前
vue3源码解析:调度器
前端·vue.js
一一一87119 分钟前
javaScript数据存储, 对象和原型与原型链
javascript
Dolphin_海豚32 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件35 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js