element 封装上一页、下一页翻页组件

turnPage.vue

<template>
  <div>
    <el-pagination background :current-page="currentPage" :total="total" :disabled="disabled" layout="prev, next" prev-text="上一页" next-text="下一页" @prev-click="prevClick" @next-click="nextClick">
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    total: {
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: () => []
    }
  },
  methods: {
    prevClick (val) {
      this.$emit('prevClick', val)
    },
    nextClick (val) {
      this.$emit('nextClick', val)
    }
  }
}
</script>

<style lang="stylus" scoped>
/deep/ .el-pagination
  text-align right
  margin-top 10px
/deep/ .el-pagination.is-background .btn-next, /deep/ .el-pagination.is-background .btn-prev
  background-color #409EFF
  color #FFF
  width 68px
  height 28px
/deep/ .el-pagination.is-background .btn-next span, /deep/ .el-pagination.is-background .btn-prev span
  font-size 12px
/deep/ .el-pagination.is-background .btn-next:disabled, /deep/ .el-pagination.is-background .btn-prev:disabled, /deep/ .el-pagination.is-background .el-pager li.disabled
  background-color #C0C4CC
</style>

使用组件

<template>
	<turn-page :currentPage="currentPage" :total="total" :disabled="disabled" @prevClick="prevClick" @nextClick="nextClick"></turn-page>
</template>

<script>
import turnPage from '@/commonComponents/turnPage'

  export default {
    components: {
      turnPage,
    },
    data() {
      return {
      total: 0,
      currentPage: null
      }
    },
    created() {
      this.refresh()
    },

    methods: {
    refresh (data, dir) {
    // 省略 axios 请求
      if (!dir) {
        this.currentPage = 1
    	this.total = res.result.total
      }
    },
    prevClick (val) {
      this.currentPage = val
      let data = {
        startNo: this.startNo,
        endNo: this.endNo,
        pageUpDown: -10
      }
      this.refresh(data, 'prev')
    },
    nextClick (val) {
      this.currentPage = val
      let data = {
        startNo: this.startNo,
        endNo: this.endNo,
        pageUpDown: 10
      }
      this.refresh(data, 'next')
    }
  }
</script>