feat: 活动分类管理补全 el-pagination 分页组件

src/views/modules/activity/classify.vue

@@ -47,6 +47,15 @@
                 </template>
             </el-table-column>
           </el-table>
+          <el-pagination
+            :current-page="queryParams.page"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="queryParams.limit"
+            :total="dataListTotal"
+            layout="total, sizes, prev, pager, next, jumper"
+            @size-change="pageSizeChangeHandle"
+            @current-change="pageCurrentChangeHandle">
+          </el-pagination>
       </div>
       <el-dialog width="800px" :visible.sync="show" :title="title" @close="cancel">
         <el-form ref="typeRef" :model="form" :rules="rules" label-width="100px" style="width: 70%;margin: 0 auto;">
@@ -91,6 +100,7 @@ export default {
         categoryName: ''
       },
       dataList: [],
+      dataListTotal: 0,
       loading: false,
       show: false,
       buttonLoading: false,
@@ -173,9 +183,19 @@ export default {
       this.$http.get('/core/activity/category/page', { params: this.queryParams }).then(res => {
         if (res.data.code !== 0) return this.$message.error(res.data.msg)
         this.dataList = res.data.data.list
+        this.dataListTotal = res.data.data.total
         this.loading = false
       })
     },
+    pageSizeChangeHandle (val) {
+      this.queryParams.limit = val
+      this.queryParams.page = 1
+      this.getList()
+    },
+    pageCurrentChangeHandle (val) {
+      this.queryParams.page = val
+      this.getList()
+    },
     submitForm () {
       this.$refs.typeRef.validate((valid) => {
         if (valid) {