分页功能修改

src/components/TablePage.vue

@@ -1,121 +1,116 @@
 <template>
-<div class="table_page">
+  <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
-        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>
+      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
-        }
-
+  props: {
+    // 共有多少页
+    totalPage: {
+      type: Number,
+      default: 0,
+    },
+    // 当前在第几页
+    currentPage: {
+      type: Number,
+      default: 1,
     },
-    computed: {
+  },
+  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);
-                        }
-                    }
-                }
+    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);
             }
-            console.log(arr);
-            return arr;
+          } else {
+            // 点击 大于五，同时后面的页面数不足五个
+            for (let i = this.totalPage - 9; i <= this.totalPage; i++) {
+              arr.push(i);
+            }
+          }
         }
+      }
+      return arr;
     },
-    methods: {
-        chagePage: function(page) {
-            this.$emit('change_page', page);
-        },
-        jumpPage:function(item) {
-            this.$emit('jump_page', item);
-        }
-    }
+  },
+  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;
-        }
+.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>