admin传统布局

示例

<template>
  <lx-layout :left-nav-style="{ width: menuCollapse ? 'auto' : '210px' }"
             :show-header="true"
  >
    <template v-slot:header>
      <div>header content</div>
    </template>
    <template v-slot:leftNav>
      <lx-menu
          :auto-jump="false"
          :data="menuData"
          :default-active="defaultActive"
          height="100%"
          :node-props="{
            index: 'meta.menuId',
            children: 'children',
            path: 'path',
            hidden: 'meta.hidden',
            title: 'meta.title'
          }"
          @click="selectNav"
      >
      </lx-menu>
    </template>
    <template v-slot:content>
      <div class="content-wrap">
        <div class="page-wrap">
          <router-view></router-view>
        </div>
      </div>
    </template>
  </lx-layout>
</template>
<script>
export default {
  data () {
    return {
      collapse: false,
      menuData: [
        {
          path: '/home',
          icon: 'el-icon-s-home',
          meta: {
            enable: true,
            hidden: false,
            isMenu: 1,
            title: '首页',
            menuId: '1',
            icon: 'el-icon-edit'
          }
        },
        {
          icon: 'el-icon-s-home',
          meta: {
            enable: true,
            hidden: false,
            isMenu: 1,
            title: '组件库',
            menuId: '7',
            icon: 'el-icon-edit'
          },
          children: [
            {
              path: '/dynamic-form',
              icon: 'el-icon-s-home',
              meta: {
                enable: true,
                hidden: false,
                isMenu: 1,
                title: '动态表单',
                menuId: '7-1'
              }
            },
            {
              path: '/dynamic-table',
              icon: 'el-icon-s-home',
              meta: {
                enable: true,
                hidden: false,
                isMenu: 1,
                title: '动态表格',
                menuId: '7-2'
              }
            }
          ]
        }
      ],
      defaultActive: '7-1'
    }
  },
  methods: {
    selectNav (navItem) {
      console.log('navItem', navItem)
    }
  }
}
</script>
<style>
.content-wrap {
  background: #d8d8d8;
  width: 100%;
  height: 300px;
}
</style>

Expand Copy Copy