我的志愿表--整合mx-pagination

src/views/career/components/VolunteerList.vue

@@ -1,95 +1,87 @@
 <template>
-    <div  style="padding: 24px 0; background-color: #f7f7f7">
-      <el-image style="width:100%" :src="require('@/assets/images/bg_zhiyuantianbao.png')"></el-image>
-      <div style="margin-top: 20px;">
-        <el-table :data="tableData" border v-loading="loading" style="min-height: 300px;">
-          <el-table-column prop="id" label="ID" align="center"></el-table-column>
-          <el-table-column prop="name" label="名称" align="center"></el-table-column>
-          <el-table-column prop="createTime" label="填报时间" align="center"></el-table-column>
-          <el-table-column prop="batchName" label="填报批次" align="center"></el-table-column>
-          <el-table-column prop="" label="志愿概要" align="center">
-            <template slot-scope="scope">
-              <div style="line-height:30px;" v-for="(item,index) in scope.row.summary" :key="index">{{item}}</div>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" align="center">
-            <template slot-scope="scope">
-              <el-link :underline="false" type="primary" @click="goDetails(scope.row)">详情 </el-link>
-              <el-link :underline="false" type="danger" style="margin-left: 7px;" @click="delTableList(scope.row)"> 删除</el-link>
-            </template>
-          </el-table-column>
-        </el-table>
-        <el-pagination
-          style="margin-top:10px;"
-          :page-sizes="[10,20,30,40,50,60,70,80,90,100]"
-          :page-size=tableParams.pageSize
-          layout="prev,pager,next,jumper,total,sizes"
-          :total="examRecordTotal"
-          @current-change="currentChange"
-          @size-change="sizeChange"
-        >
-        </el-pagination>
-      </div>
+  <div style="padding: 24px 0; background-color: #f7f7f7">
+    <el-image style="width:100%" :src="require('@/assets/images/bg_zhiyuantianbao.png')"></el-image>
+    <div style="margin-top: 20px;">
+      <el-table :data="tableData" border v-loading="loading" style="min-height: 300px;">
+        <el-table-column prop="id" label="ID" align="center"></el-table-column>
+        <el-table-column prop="name" label="名称" align="center"></el-table-column>
+        <el-table-column prop="createTime" label="填报时间" align="center"></el-table-column>
+        <el-table-column prop="batchName" label="填报批次" align="center"></el-table-column>
+        <el-table-column prop="" label="志愿概要" align="center">
+          <template slot-scope="scope">
+            <div style="line-height:30px;" v-for="(item,index) in scope.row.summary" :key="index">{{ item }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center">
+          <template slot-scope="scope">
+            <el-link :underline="false" type="primary" @click="goDetails(scope.row)">详情</el-link>
+            <el-link :underline="false" type="danger" style="margin-left: 7px;" @click="delTableList(scope.row)"> 删除
+            </el-link>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination :total="examRecordTotal" :autoScroll="false" @pagination="onChangePage"
+                  :page.sync="tableParams.pageNum"
+                  :limit.sync="tableParams.pageSize"
+      ></pagination>
     </div>
+  </div>
 </template>
 
 <script>
-  import {selectZytbRecord,delZytbRecord} from '@/api/webApi/career-other'
-    export default {
-        name: "VolunteerList",
-      data(){
-          return{
-            examRecordTotal:0,
-            tableParams:{
-              pageSize:20,
-              pageNum:1
-            },
-            tableData:[],
-            loading:false
-          }
+import { delZytbRecord, selectZytbRecord } from '@/api/webApi/career-other'
+
+export default {
+  name: 'VolunteerList',
+  data() {
+    return {
+      examRecordTotal: 0,
+      tableParams: {
+        pageSize: 20,
+        pageNum: 1
       },
-      created(){
+      tableData: [],
+      loading: false
+    }
+  },
+  created() {
+    this.getZytbRecord()
+  },
+  methods: {
+    goDetails(data) {
+      this.$router.push({ name: 'RecordDetail', params: { data: data } })
+    },
+    delTableList(data) {
+      console.log(data)
+      this.$confirm(`是否确定删除-${data.name} ？`, '提示', {
+        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', closeOnClickModal: false
+      }).then(() => {
+        const params = {
+          id: data.id
+        }
+        delZytbRecord(params).then(res => {
           this.getZytbRecord()
-      },
-      methods:{
-        goDetails(data){
-          this.$router.push({name:'RecordDetail',params:{data:data}})
-        },
-        delTableList(data){
-          console.log(data)
-          this.$confirm(`是否确定删除-${data.name} ？`, '提示', {
-            confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', closeOnClickModal: false
-          }).then(() => {
-            const params={
-              id:data.id
-            }
-            delZytbRecord(params).then(res=>{
-              this.getZytbRecord()
-              this.msgSuccess('删除成功')
-            })
-          }).catch(() => {
-          })
+          this.msgSuccess('删除成功')
+        })
+      }).catch(() => {
+      })
 
-        },
-        getZytbRecord(){
-          this.loading=true
-          selectZytbRecord(this.tableParams).then(res=>{
-            this.examRecordTotal=res.total
-            this.loading=false
-            this.tableData=res.rows
-          })
-        },
-        sizeChange(e){
-          this.tableParams.pageSize=e
-          this.getZytbRecord()
-        },
-        currentChange(e){
-          //页数
-          this.tableParams.pageNum=e
-          this.getZytbRecord()
-        }
-      }
+    },
+    getZytbRecord() {
+      this.loading = true
+      selectZytbRecord(this.tableParams).then(res => {
+        this.examRecordTotal = res.total
+        this.loading = false
+        this.tableData = res.rows
+      })
+    },
+    onChangePage(page) {
+      this.tableParams.pageSize = page.limit
+      this.tableParams.pageNum = page.page
+      this.getZytbRecord()
     }
+  }
+}
 </script>
 
 <style scoped>

src/views/career/zhiyuan/SimulatedVolunteer.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="simulate" ref="simulate">
-    <div class="mx-flex-row mx-flex-center-center">
+    <div class="mx-flex-row mx-flex-center-center text-center">
       <el-image fit="cover" style="height:180px; width:80%" :src="require('@/assets/images/career/img_banner02.png')"></el-image>
     </div>
     <!--  内容区域-->