update

simple-demo/location_point.html

@@ -61,7 +61,13 @@
             </li>
             <div class="pagination">
                 <a href="#" @click.prevent="changePage(page-1)" :disabled="page === 1">上一页</a>
-                <a href="#" v-for="p in totalPages" @click.prevent="changePage(p)">{{ p }}</a>
+                <a
+                        v-for="p in visiblePages"
+                        @click="changePage(p)"
+                        :class="{ current: p === page }"
+                >
+                    {{ p }}
+                </a>
                 <a href="#" @click.prevent="changePage(page+1)" :disabled="page === totalPages">下一页</a>
                 <select v-model="size" v-on:change="changeSize">
                     <option value="10">10条/页</option>
@@ -113,6 +119,18 @@
             this.getLocation();
             this.getLatestData(); // 获取最新的数据
         },
+        computed: {
+            visiblePages() {
+                const left = Math.max(1, this.page - 2);
+                const right = Math.min(this.totalPages, this.page + 2);
+
+                const pages = [];
+                for (let i = left; i <= right; i++) {
+                    pages.push(i);
+                }
+                return pages;
+            }
+        },
         methods: {
             changePage(newPage) {
                 this.page = newPage;