分页

src/components/Table.vue

@@ -24,11 +24,31 @@
         </tbody>
     </table>
     <div class="page">
-        <div class="fisrtPage">首页</div>
-        <div class="previousPage">上一页</div>
-        <div v-for="(item, index) in pageArr" :key="index" :class="{current_page: currentPage == item}">{{item}}</div>
-        <div class="nextPage">下一页</div>
-        <div class="lastPage">尾页</div>
+        <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,14 +136,43 @@ export default {
         }
     },
     computed: {
+        // 生成表格的导航
         pageArr() {
             let arr = [];
-            for(let i= 1; i <= this.totalPage; i++){
-                arr.push(i);
+            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>

src/views/data/UploadInfor.vue

@@ -54,6 +54,9 @@
         :operation='operation'
         :discolor='discolor'
         :totalPage='totalPage'
+        :currentPage='currentPage'
+        @change_page='changePage'
+        @jump_page='jumpPage'
       />
     </div>
     <button @click="submit" class="submitBtn">提交</button>
@@ -80,9 +83,10 @@ export default {
       range: '',
       addByCustomize: '',
       // 表格配置
-      sum: 100, // 一共有多少条数据
+      sum: 240, // 一共有多少条数据
       pageSize: 20, // 每页展示的数据
       discolor: false, // 是否隔行变色
+      currentPage: 1,
       areaList: ['全区', '北区', '南区', '东区', '自定义分组'],
       materialTimeList: ['2020-03', '2020-04'],
       rangeList: ['1', '2', '3'],
@@ -117,6 +121,29 @@ export default {
     showDetail: () => {
       alert('展示详情');
     },
+    // 获取某一页面的数据，展示在表格
+    changePage: function(page) {
+      this.currentPage = page;
+      console.log(page);
+    },
+    // 点击上一页，下一页，首页，尾页
+    jumpPage: function(item) {
+      switch(item) {
+        case 1:
+          this.currentPage = 1;
+          break;
+        case 2:
+          this.currentPage = this.currentPage - 1;
+          break;
+        case 3:
+          this.currentPage = this.currentPage + 1;
+          break;
+        case 4:
+          this.currentPage = this.totalPage;
+          break;
+      }
+      console.log(this.currentPage);
+    },
     submit: function() {
       console.log(this.totalPage);
       this.sum = this.sum + 1;