分页更新

src/layout/otheruser/otheruserList.vue

@@ -21,6 +21,16 @@
             </template>
           </el-table-column>
         </el-table>
+        <el-row class="page">
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            layout="total, prev, pager, next, jumper"
+            :total="total"
+          >
+          </el-pagination>
+        </el-row>
       </el-col>
     </el-row>
   </div>
@@ -31,9 +41,12 @@ export default {
   name: 'otheruserList',
   props: {
     debtTable: null,
+    total: null,
   },
   components: {},
-  data: () => ({}),
+  data: () => ({
+    currentPage: 1,
+  }),
   created() {},
   computed: {},
   methods: {
@@ -43,8 +56,19 @@ export default {
     clickRest(id) {
       this.$emit('clickRest', id);
     },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
   },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.page {
+  text-align: center;
+  padding: 15px 0;
+}
+</style>

src/views/otheruser/index.vue

@@ -8,7 +8,7 @@
         <searchInfo></searchInfo>
       </el-col>
       <el-col :span="24" class="main">
-        <otheruserList :debtTable="debtTable" @deleteRow="deleteRow" @clickRest="clickRest"></otheruserList>
+        <otheruserList :debtTable="debtTable" :total="total" @deleteRow="deleteRow" @clickRest="clickRest"></otheruserList>
       </el-col>
     </el-col>
   </div>
@@ -32,6 +32,7 @@ export default {
     topTitle: '其他用户',
     display: 'block',
     debtTable: [],
+    total: '',
   }),
   created() {
     this.searchInfo();
@@ -42,6 +43,7 @@ export default {
     async searchInfo({ skip = 0, limit = 10, ...info } = {}) {
       const res = await this.query({ skip, limit, ...info });
       this.$set(this, `debtTable`, res.data);
+      this.$set(this, `total`, res.total);
     },
     // 添加
     clickBtn() {