封装el-pagination分页工具

<template lang="pug">
  .st-pagination
    template
      el-pagination(v-if="total > 0"
        @current-change="handleCurrentChange"
        @prev-click="prePage"
        @next-click="nextPage"
        :current-page.sync="searchCondition.currPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total")
</template>
<script>
export default {
  props: {
    total: {            // 总页码
      type: Number,
      default: 0
    },
    currPage: {         // 当前页码
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      pageSize: 10,                // 表格每页行记录量
      searchCondition: {
        currPage: 1
      }
    }
  },

  watch: {
    currPage(val) {
      this.searchCondition.currPage = val
    }
  },

  methods: {
    /**
     * 处理分页
     */
    handleCurrentChange(val) {
      // this.searchCondition.currPage = val
      // this.$emit('currentChange', this.searchCondition)
      this.$emit('update:currPage', this.searchCondition.currPage)
		},

    /**
     * 前一页
     */
    prePage(val) {
      // this.searchCondition.currPage = val
      // this.$emit('currentChange', this.searchCondition)
		},

    /**
     * 下一页
     */
    nextPage(val) {
      // this.searchCondition.currPage = val
      // this.$emit('currentChange', this.searchCondition)
    }
  }
}
</script>

引入

import pagination from "@/pc/layout/Pagination.vue";

注册

components: {
    pagination,
  },

使用

<pagination :total='total' :currPage.sync='searchCondition.currPage'>

watch监听切换分页

watch: {
    "searchCondition.currPage"(val) {
      this.loadTable(this.searchCondition);
    },
  },