表格数据统计组件&&路由重定向&&分页功能抽取&&路由选中样式

src/components/Count.vue

@@ -0,0 +1,19 @@
+<template>
+<div class="table_count">
+    <p>共有{{sum}}条记录</p>
+</div>
+</template>
+
+<script>
+export default {
+    props: {
+        sum: {
+            type: Number,
+            default: 0            
+        }
+    }
+};
+</script>
+
+<style scoped lang="less">
+</style>

src/components/RouterBanner.vue

@@ -32,11 +32,11 @@
         >
           <p
             @click="getNavTitle(routerObj.title, list.title)"
+            :class="{blueColor: list.path === routerPath}"
           >- {{ list.title }}</p>
           
         </router-link>          
         </div>
-
       </div>
     </div>
   </div>
@@ -98,8 +98,14 @@ export default {
       ],
     };
   },
+  computed: {
+      routerPath: function() {
+        console.log(this.$route.path);
+        return this.$route.path
+      }
+  },
   methods: {
-    getNavTitle: function(navTitle1, navTitle2){
+    getNavTitle: function(navTitle1, navTitle2) {
       // 点击路由的时候，修改导航栏
       this.$emit('change_nav', navTitle1, navTitle2);
     }
@@ -127,6 +133,9 @@ export default {
         .title{
           color: #fff;
         }
+        p{
+          color: #fff;
+        }
       }
       .title {
         font-size: 14px;
@@ -165,4 +174,8 @@ export default {
     }
   }
 }
+// 选中变色
+.blueColor{
+  color: #0056a0;
+}
 </style>

src/components/Table.vue

@@ -23,33 +23,6 @@
             </tr>
         </tbody>
     </table>
-    <div class="page">
-        <div
-            class="fisrtPage"
-            @click="jumpPage(1)"
-            v-show="currentPage > 1"
-        >首页</div>
-        <div
-            class="previousPage"
-            @click="jumpPage(2)"
-            v-show="currentPage > 1"
-        >上一页</div>
-        <div
-            v-for="(item, index) in pageArr" :key="index"
-            :class="{current_page: currentPage == item}"
-            @click="chagePage(item)"
-        >{{item}}</div>
-        <div
-            class="nextPage"
-            @click="jumpPage(3)"
-            v-show="currentPage < totalPage"
-        >下一页</div>
-        <div
-            class="lastPage"
-            @click="jumpPage(4)"
-            v-show="currentPage < totalPage"
-        >尾页</div>
-    </div>
   </div>
 </template>
 
@@ -116,70 +89,19 @@ export default {
         pageSize: {
             type: Number,
             default: 20
-        },
-        // 表数据共有多少页
-        totalPage: {
-            type: Number,
-            default: 0
-        },
-        // 当前在第几页
-        currentPage: {
-            type: Number,
-            default: 1
         }
     },
     mounted() {
-        console.log(this.totalPage);
     },
     data() {
         return {
         }
-    },
-    computed: {
-        // 生成表格的导航
-        pageArr() {
-            let arr = [];
-            if(this.totalPage <= 10) { // 最多展示十个，总页面小于等于10，全部展示
-                for(let i = 1; i <= this.totalPage; i++){
-                    arr.push(i);
-                }
-            } else {
-                // 点击的是1~5， 展示1~10
-                if (this.currentPage - 5 <= 0) {
-                    for(let i = 1; i <= 10; i++){
-                        arr.push(i);
-                    }
-                } else {
-                    // 点击 大于5，同时后面的页面至少有五个五个，展示
-                    if (this.totalPage - this.currentPage > 4) {
-                        for(let i = this.currentPage - 4; i <= this.currentPage + 5; i++){
-                            arr.push(i);
-                        }
-                    } else { // 点击 大于五，同时后面的页面数不足五个
-                        for(let i = this.totalPage - 9; i <= this.totalPage; i++) {
-                            arr.push(i);
-                        }
-                    }
-                }
-            }
-            console.log(arr);
-            return arr;
-        }
-    },
-    methods: {
-        chagePage: function(page) {
-            this.$emit('change_page', page);
-        },
-        jumpPage:function(item) {
-            this.$emit('jump_page', item);
-        }
     }
 };
 </script>
 
 <style scoped lang="less">
 .table_template{
-    margin: 5px;
     text-align: center;
     .table{
         background-color: #fff;
@@ -194,37 +116,6 @@ export default {
             }
         }
     }
-    .page{
-        height: 30px;
-        display: flex;
-        border-left: 1px solid #ccc;
-        div{
-            width: 32px;
-            background-color: #fff;
-            line-height: 30px;
-            border-bottom: 1px solid #ccc;
-            border-right: 1px solid #ccc;
-            &:hover{
-                cursor: pointer;
-            }
-        }
-        .current_page{
-            color: #999;
-            background-color: #f5f5f5;
-        }
-        .fisrtPage{
-            width: 50px;
-        }
-        .previousPage{
-            width: 60px;
-        }
-        .nextPage{
-            width: 60px;
-        }
-        .lastPage{
-            width: 50px;
-        }
-    }
 }
 .table_gray{
     background: #f5f5f5;

src/components/TablePage.vue

@@ -0,0 +1,121 @@
+<template>
+<div class="table_page">
+    <div
+        class="fisrtPage"
+        @click="jumpPage(1)"
+        v-show="currentPage > 1"
+    >首页</div>
+    <div
+        class="previousPage"
+        @click="jumpPage(2)"
+        v-show="currentPage > 1"
+    >上一页</div>
+    <div
+        v-for="(item, index) in pageArr" :key="index"
+        :class="{current_page: currentPage == item}"
+        @click="chagePage(item)"
+    >{{item}}</div>
+    <div
+        class="nextPage"
+        @click="jumpPage(3)"
+        v-show="currentPage < totalPage"
+    >下一页</div>
+    <div
+        class="lastPage"
+        @click="jumpPage(4)"
+        v-show="currentPage < totalPage"
+    >尾页</div>
+</div>
+</template>
+
+<script>
+export default {
+    props: {
+        // 共有多少页
+        totalPage: {
+            type: Number,
+            default: 0
+        },
+        // 当前在第几页
+        currentPage: {
+            type: Number,
+            default: 1
+        }
+
+    },
+    computed: {
+    // 生成表格的导航
+        pageArr() {
+            let arr = [];
+            if(this.totalPage <= 10) { // 最多展示十个，总页面小于等于10，全部展示
+                for(let i = 1; i <= this.totalPage; i++){
+                    arr.push(i);
+                }
+            } else {
+                // 点击的是1~5， 展示1~10
+                if (this.currentPage - 5 <= 0) {
+                    for(let i = 1; i <= 10; i++){
+                        arr.push(i);
+                    }
+                } else {
+                    // 点击 大于5，同时后面的页面至少有五个五个，展示
+                    if (this.totalPage - this.currentPage > 4) {
+                        for(let i = this.currentPage - 4; i <= this.currentPage + 5; i++){
+                            arr.push(i);
+                        }
+                    } else { // 点击 大于五，同时后面的页面数不足五个
+                        for(let i = this.totalPage - 9; i <= this.totalPage; i++) {
+                            arr.push(i);
+                        }
+                    }
+                }
+            }
+            console.log(arr);
+            return arr;
+        }
+    },
+    methods: {
+        chagePage: function(page) {
+            this.$emit('change_page', page);
+        },
+        jumpPage:function(item) {
+            this.$emit('jump_page', item);
+        }
+    }
+};
+</script>
+
+<style scoped lang="less">
+    .table_page{
+        height: 30px;
+        display: flex;
+        border-left: 1px solid #ccc;
+        div{
+            width: 32px;
+            background-color: #fff;
+            line-height: 30px;
+            border-bottom: 1px solid #ccc;
+            border-right: 1px solid #ccc;
+            text-align: center;
+            &:hover{
+                cursor: pointer;
+            }
+        }
+        .current_page{
+            color: #999;
+            background-color: #f5f5f5;
+        }
+        .fisrtPage{
+            width: 50px;
+        }
+        .previousPage{
+            width: 60px;
+        }
+        .nextPage{
+            width: 60px;
+        }
+        .lastPage{
+            width: 50px;
+        }
+    }
+</style>

src/router/index.js

@@ -17,6 +17,11 @@ Vue.use(VueRouter)
 
 const routes = [
   {
+    path: '/',
+    component: UploadInfor,
+    redirect: '/uploadInfor'
+  },
+  {
     path: '/uploadRecord',
     component: UploadRecord
   },

src/views/data/UploadInfor.vue

@@ -45,6 +45,9 @@
         </div>
       </div>
     </form>
+    <div class="count">
+      <Count :sum='sum'/>
+    </div>
     <div class="table">
       <UpLoadTable
         :trStyle='trStyle'
@@ -53,6 +56,10 @@
         :tableHeadStyle='tableHeadStyle'
         :operation='operation'
         :discolor='discolor'
+      />
+    </div>
+    <div class="page">
+      <Tablepage
         :totalPage='totalPage'
         :currentPage='currentPage'
         @change_page='changePage'
@@ -65,6 +72,8 @@
 
 <script>
 import UpLoadTable from '../../components/Table';
+import Count from '../../components/Count';
+import Tablepage from '../../components/TablePage';
 export default {
   props:{
     isManufacturer: {
@@ -74,6 +83,8 @@ export default {
   },
   components: {
     UpLoadTable,
+    Count,
+    Tablepage
   },
   data() {
     return {
@@ -221,7 +232,12 @@ export default {
     }
   }
   .table{
+    margin-top: 10px;
+  }
+  .count{
     margin-top: 20px;
+    display: flex;
+    justify-content: flex-end;
   }
   .submitBtn{
     margin-top: 50px;