update

src/components/Pagination/index.vue

+<template>
+  <div :class="{'hidden':hidden}" class="pagination-container">
+    <el-pagination
+      :background="background"
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import { scrollTo } from '@/utils/scroll-to'
+
+export default {
+  name: 'Pagination',
+  props: {
+    total: {
+      required: true,
+      type: Number
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 20
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 50]
+      }
+    },
+    layout: {
+      type: String,
+      default: 'total, sizes, prev, pager, next, jumper'
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      }
+    },
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.pagination-container {
+  background: #fff;
+  padding: 32px 16px;
+}
+.pagination-container.hidden {
+  display: none;
+}
+</style>

src/utils/scroll-to.js

+Math.easeInOutQuad = function(t, b, c, d) {
+  t /= d / 2
+  if (t < 1) {
+    return c / 2 * t * t + b
+  }
+  t--
+  return -c / 2 * (t * (t - 2) - 1) + b
+}
+
+// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
+var requestAnimFrame = (function() {
+  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
+})()
+
+/**
+ * Because it's so fucking difficult to detect the scrolling element, just move them all
+ * @param {number} amount
+ */
+function move(amount) {
+  document.documentElement.scrollTop = amount
+  document.body.parentNode.scrollTop = amount
+  document.body.scrollTop = amount
+}
+
+function position() {
+  return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
+}
+
+/**
+ * @param {number} to
+ * @param {number} duration
+ * @param {Function} callback
+ */
+export function scrollTo(to, duration, callback) {
+  const start = position()
+  const change = to - start
+  const increment = 20
+  let currentTime = 0
+  duration = (typeof (duration) === 'undefined') ? 500 : duration
+  var animateScroll = function() {
+    // increment the time
+    currentTime += increment
+    // find the value with the quadratic in-out easing function
+    var val = Math.easeInOutQuad(currentTime, start, change, duration)
+    // move the document.body
+    move(val)
+    // do the animation unless its over
+    if (currentTime < duration) {
+      requestAnimFrame(animateScroll)
+    } else {
+      if (callback && typeof (callback) === 'function') {
+        // the animation is done so lets callback
+        callback()
+      }
+    }
+  }
+  animateScroll()
+}

src/views/system/power/user/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container">
     <el-button type="primary" @click="handleAddRole">添加</el-button>
 
-    <el-table :data="data" style="width: 100%;margin-top:30px;" border>
+    <el-table v-loading="listLoading" :data="data" style="width: 100%;margin-top:30px;" border>
       <el-table-column align="center" label="ID" width="220">
         <template slot-scope="scope">
           {{ scope.row.id }}
@@ -20,7 +20,7 @@
       </el-table-column>
       <el-table-column align="center" label="角色" width="220">
         <template slot-scope="scope">
-          {{ scope.row.roles.data.name }}
+          {{ scope.row.role.data.name }}
         </template>
       </el-table-column>
       <el-table-column align="header-center" label="头像">
@@ -43,6 +43,8 @@
       </el-table-column>
     </el-table>
 
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getUsers" />
+
     <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑':'添加'">
       <el-form :model="user" label-width="80px" label-position="left">
         <el-form-item label="用户名">
@@ -95,10 +97,19 @@ import { userAdd, userDel, userEdit, userList, uploadFile } from '@/api/user'
 import { deepClone } from '@/utils/util'
 import { Message } from 'element-ui'
 import { roleList } from '@/api/role'
+import Pagination from '@/components/Pagination'
 
 export default {
+  components: { Pagination },
   data() {
     return {
+      total: 0,
+      listQuery: {
+        page: 1,
+        limit: 20
+      },
+
+      listLoading: false,
       loading: false,
       imageUrl: '',
       user: {
@@ -137,8 +148,13 @@ export default {
       this.roleData = res.data
     },
     async getUsers() {
-      const res = await userList({ include: 'roles' })
+      this.listLoading = true
+
+      userList({ page: this.listQuery.page, per_page: this.listQuery.limit, include: 'role' })
+        .then((res) => {
           this.data = res.data
+          this.total = res.meta.pagination.total
+        }).finally(() => { this.listLoading = false })
     },
 
     handleAddRole() {
@@ -159,7 +175,7 @@ export default {
         name: row.name,
         avatar: row.avatar,
         avatar_full_url: row.avatar_full_url,
-        role_id: row.roles.data.id,
+        role_id: row.role.data.id,
         is_admin: row.is_admin,
         created_at: row.created_at
       }
@@ -186,7 +202,7 @@ export default {
       if (isEdit) {
         await userEdit(this.user.id, this.user)
         const newData = this.user
-        newData.roles = {
+        newData.role = {
           data: {
             id: this.user.role_id,
             name: this.roleData.find(item => item.id === this.user.role_id).name
@@ -204,7 +220,7 @@ export default {
         this.user.id = data.id
         const newData = this.user
         newData.create_at = data.create_at
-        newData.roles = {
+        newData.role = {
           data: {
             id: data.role.id,
             name: data.role.name