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
        }
      ]
相关推荐
前端_学习之路14 分钟前
React--Fiber 架构
前端·react.js·架构
coderlin_16 分钟前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说31 分钟前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_4244091938 分钟前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding39 分钟前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜40 分钟前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD41 分钟前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding42 分钟前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空1 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
柚子8161 小时前
scroll-marker轮播组件不再难
前端·css