更新

src/views/test/dialogs.vue

@@ -23,7 +23,7 @@
                 background
                 @current-change="handleCurrentChange"
                 :current-page="currentPage"
-                layout="total,  prev, pager, next, jumper"
+                layout="total, prev, pager, next, jumper"
                 :total="total"
                 :page-size="pageSize"
               >
@@ -76,7 +76,7 @@ export default {
       form: {},
       currentPage: 0,
       pageSize: 10,
-      skip: '',
+      skip: 0,
     };
   },
   created() {

src/views/test/route.vue

@@ -18,6 +18,17 @@
                 </template>
               </el-table-column>
             </el-table>
+            <el-col :span="24" class="page">
+              <el-pagination
+                background
+                @current-change="handleCurrentChange"
+                :current-page="currentPage"
+                layout="total, prev, pager, next, jumper"
+                :total="total"
+                :page-size="pageSize"
+              >
+              </el-pagination>
+            </el-col>
           </el-col>
         </el-col>
       </el-col>
@@ -41,6 +52,10 @@ export default {
   data: function() {
     return {
       list: [],
+      total: 0,
+      currentPage: 0,
+      pageSize: 10,
+      skip: 0,
     };
   },
   created() {
@@ -50,9 +65,11 @@ export default {
     ...lunbo(['query', 'fetch', 'create', 'update', 'delete']),
     // 查询列表
     async search({ skip = 0, limit = 10, ...info } = {}) {
+      skip = this.skip;
       let res = await this.query({ skip, limit, ...info });
       if (this.$checkRes(res)) {
         this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
       }
     },
     // 删除
@@ -74,6 +91,10 @@ export default {
     handleEdit(data) {
       this.$router.push({ path: '/routeDetail', query: { id: data.id } });
     },
+    handleCurrentChange(currentPage) {
+      this.$set(this, `skip`, (currentPage - 1) * this.pageSize);
+      this.search();
+    },
   },
   computed: {
     ...mapState(['user']),
@@ -81,4 +102,9 @@ export default {
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.page {
+  text-align: center;
+  margin: 15px 0;
+}
+</style>