补充分页功能

src/api/report.js

@@ -1,8 +1,8 @@
 import request from '@/utils/axios'
 
-export function reportList() {
+export function reportList(limit, offset) {
     return request({
-        url: '/report/',
+        url: '/report/?limit=' + limit + '&offset=' + offset,
         method: 'get'
     })
 }

src/views/report/report.vue

@@ -21,6 +21,13 @@
         </template>
       </el-table-column>
     </el-table>
+    <el-pagination
+      background
+      layout="total,prev, pager, next"
+      :page-size="limit"
+      @current-change="handleSizeChange"
+      :total="reportTotal"
+    ></el-pagination>
     <add-or-up
       ref="AddOrUpdate"
       :visible.sync="addOrUpdateVisible"
@@ -40,16 +47,24 @@ export default {
     addOrUp
   },
   data() {
-    return { tableData: [], addOrUpdateVisible: false, id: null };
+    return {
+      tableData: [],
+      addOrUpdateVisible: false,
+      id: null,
+      reportTotal: 0,
+      limit: 3
+    };
   },
   created() {
+    console.log("aasd");
     this.getReport();
   },
   methods: {
     getReport: function() {
       console.log(reportList);
-      reportList().then(res => {
+      reportList(3, 0).then(res => {
         this.tableData = res.data.results;
+        this.reportTotal = res.data.count;
         console.log(res);
       });
     },
@@ -72,6 +87,13 @@ export default {
     },
     deClose: function() {
       this.addOrUpdateVisible = false;
+    },
+    handleSizeChange: function(val) {
+      reportList(this.limit, (val - 1) * this.limit).then(res => {
+        this.tableData = res.data.results;
+        this.reportTotal = res.data.count;
+        console.log(res);
+      });
     }
   }
 };