History add pagination

src/views/gambleMember/history/index.vue

@@ -17,7 +17,7 @@
     </div>
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row>
       <el-table-column :label="member.name" align="center">
-        <el-table-column label="場" align="center">
+        <el-table-column label="場次" align="center">
           <template slot-scope="scope">
             {{scope.row.game}}
           </template>
@@ -44,6 +44,12 @@
         </el-table-column>
       </el-table-column>      
     </el-table>
+
+    <div v-show="!listLoading" class="pagination-container">
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
+        :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
+      </el-pagination>
+    </div>
   </div>
 </template>
 
@@ -61,6 +67,7 @@ export default {
   data() {
     return {
       list: null,
+      total: null,
       listLoading: true,
       listQuery: {
         page: 1,
@@ -99,23 +106,27 @@ export default {
     }
   },
   created() {
-    console.log(this.member)
     this.SetVisible(false)
-    this.fetchData()
+    this.getList()
   },
   props: ['member'],
   methods: {
     ...mapActions([
       'SetVisible'
     ]),
-    fetchData() {
+    getList() {
       this.listLoading = true
       fetchHistory(this.member, this.listQuery).then(response => {
         this.list = response.data
+        this.total = response.data.length
         this.listLoading = false
       })
     },
+    handleDetail() {
+      
+    },
     handleFilter() {
+      this.listQuery.page = 1
       if(this.date) {
         this.listQuery.startAt = moment.utc(this.date[0]).format()
         this.listQuery.endAt = moment.utc(this.date[1]).format()
@@ -123,10 +134,15 @@ export default {
         this.listQuery.startAt = null
         this.listQuery.endAt = null
       }
-      this.fetchData()      
+      this.getList()
     },
-    handleDetail() {
-      
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.listQuery.page = val
+      this.getList()
     },
     moment(time) {
       return moment(time).tz("Asia/Taipei").format('YYYY-MM-DD HH:mm:ss')