分页器

src/assets/css/globel.css

@@ -16,3 +16,6 @@ html,body,#app{
     margin-top: 15px;
     font-size: 15px;
 }
+.el-pagination {
+    margin-top: 15px;
+}

src/components/users/users.vue

@@ -43,6 +43,17 @@
           </template>
         </el-table-column>
       </el-table>
+
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="queryInfo.pagenum"
+        :page-sizes="[1, 2, 20, 50]"
+        :page-size="queryInfo.pagesize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total">
+      </el-pagination>
+
     </el-card>
 
   </div>
@@ -63,6 +74,14 @@ export default {
     }
   },
   methods: {
+    handleSizeChange (val) {
+      this.queryInfo.pagesize = val
+      this.getUserList()
+    },
+    handleCurrentChange (val) {
+      this.queryInfo.pagenum = val
+      this.getUserList()
+    },
     changeState (state) {
       console.log(state)
     },