增加了bus 增加了分块区滚动 增加了table 增加了分页 修改了某些分页接口 角色增删

QMPlusVuePage/src/view/layout/index.vue

@@ -1,25 +1,53 @@
 <template>
   <el-container class="layout-cont">
-    <el-header class="header-cont">顶部</el-header>
+    <el-header class="header-cont">
+   
+    </el-header>
     <el-container>
       <el-aside class="main-cont main-left">
-        <Aside />
+        <Aside class="aside" />
       </el-aside>
-      <el-main class="main-cont main-right">
-        <transition name="el-fade-in-linear" mode="out-in">
-          <router-view></router-view>
-        </transition>
-      </el-main>
+      <!-- 分块滑动功能 -->
+      <vue-scroll>
+        <el-main class="main-cont main-right">
+          <!-- 当前面包屑用路由自动生成可根据需求修改 -->
+          <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
+            <el-breadcrumb-item v-for="item in matched.slice(1,matched.length)" :key="item.path" :to="{ path: item.path }">{{item.meta.title}}</el-breadcrumb-item>
+          </el-breadcrumb>
+          <transition mode="out-in" name="el-fade-in-linear">
+            <router-view></router-view>
+          </transition>
+        </el-main>
+      </vue-scroll>
     </el-container>
   </el-container>
 </template>
 
 <script>
 import Aside from '@/view/layout/aside'
+import vueScroll from 'vuescroll'
+import 'vuescroll/dist/vuescroll.css'
 export default {
   name: 'Layout',
   components: {
-    Aside
+    Aside,
+    vueScroll
+  },
+  methods: {
+    totalCollapse() {
+      this.$bus.emit('totalCollapse')
+    }
+  },
+  computed:{
+    title(){
+      return this.$route.meta.title||'当前页面'
+    },
+    matched(){
+      return this.$route.matched
+    }
+  },
+  created(){
+    console.log(this.$route.matched)
   }
 }
 </script>
@@ -28,17 +56,53 @@ export default {
 $headerHigh: 52px;
 $mainHight: calc(100vh - 52px);
 .layout-cont {
+  .menu-contorl {
+    line-height: 52px;
+    font-size: 20px;
+    color: #eee;
+    display: table-cell;
+    vertical-align: middle;
+  }
   .header-cont {
     height: $headerHigh !important;
     background: palevioletred;
   }
   .main-cont {
-    .el-menu-vertical {
-      min-height: $mainHight !important;
-    &.noCollapse{
-      min-height: $mainHight !important;
-      width: 250px;
+    .breadcrumb{
+      line-height: 24px;
+      padding: 6px;
+      border-bottom: 1px solid #eee;
+      margin-bottom: 6px;
     }
+    &.el-main{
+      padding: 0px 10px;
+      margin: 0px 0px 0px 12px;
+      background: #fff;
+    }
+    height: $mainHight !important;
+    overflow: visible;
+    position: relative;
+    .menu-total {
+      z-index: 5;
+      position: absolute;
+      top: 50%;
+      margin-top: -10px;
+      line-height: 20px;
+      font-size: 20px;
+      border: 0 solid #ffffff;
+      border-radius: 50%;
+      right: -10px;
+      background: #fff;
+    }
+    .aside {
+      background: #fff;
+    }
+    .el-menu-vertical {
+      height: $mainHight !important;
+      visibility: auto;
+      &.noCollapse {
+        width: 250px;
+      }
     }
     &::-webkit-scrollbar {
       display: none;
@@ -47,7 +111,6 @@ $mainHight: calc(100vh - 52px);
       width: auto !important;
     }
     background: blueviolet;
-    height: $mainHight !important;
   }
 }
 </style>