el-pagination分页二次封装

---

main.js引入全局组件

1. 组件

page.vue

<template>
  <!--分页-->
  <!-- <div class="page_block" v-if="this.pages > 0"> -->
  <div class="page_block">
    <el-pagination background layout="total, sizes, slot,->" :total="total" :page-sizes="pageArr" :page-size="pageSize" :current-page="currPage" @current-change="handleCurrentChange" @size-change="handleSizeChange">
      <span>共 {{this.pages}} 页</span>
    </el-pagination>
    <el-pagination background layout="slot, prev, next" :total="total" :page-sizes="pageArr" :page-size="pageSize" :current-page="currPage" prev-text="上一页" next-text="下一页" @current-change="handleCurrentChange" @size-change="handleSizeChange">
      <el-button type="text" :disabled="currPage === 1" @click="handleCurrentChange(1)">首页</el-button>
    </el-pagination>
    <el-pagination background layout="slot" :total="total" :page-sizes="pageArr" :page-size="pageSize" :current-page="currPage" @current-change="handleCurrentChange" @size-change="handleSizeChange">
      <el-button type="text" :disabled="currPage === pages" @click="handleCurrentChange(pages)">末页</el-button>
    </el-pagination>
    <el-pagination background layout="jumper,slot" :total="total" :page-sizes="pageArr" :page-size="pageSize" :current-page="currPage" @current-change="handleCurrentChange" @size-change="handleSizeChange">
      <!-- <el-button type="primary" @click="handleCurrentChange(currPage)">确定</el-button> -->
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      pageArr: [1, 5, 10, 20, 30, 40, 50],
      total: this.$store.state.page.total,
      pageSize: this.$store.state.page.pageSize,
      currPage: this.$store.state.page.currPage,
      pages: this.$store.state.page.pages,
    }
  },
  components: {},
  mounted() {
  },
  methods: {
    //每页展示条数
    handleSizeChange(val) {
      //事件传递
      this.$emit('handleSizeChangeSub', val)
    },
    //当前页
    handleCurrentChange(val) {
      //事件传递
      this.$emit('handleCurrentChangeSub', val)
    }
  },
  watch: {
    '$store.state.page.total'() {
      this.total = this.$store.state.page.total
    },
    '$store.state.page.pageSize'() {
      this.pageSize = this.$store.state.page.pageSize
    },
    '$store.state.page.currPage'() {
      this.currPage = this.$store.state.page.currPage
    },
    '$store.state.page.pages'() {
      this.pages = this.$store.state.page.pages
    },
  },
  created() {
  },
  // 过滤器设计目的就是用于简单的文本转换
  filters: {},
  // 若要实现更复杂的数据变换，你应该使用计算属性
  computed: {},
}
</script>

<style scoped>
.el-pagination {
  padding: 0 !important;
  display: inline-block;
}

.el-pagination .el-select .el-input {
  margin: 0;
}

.page_block /deep/ .el-pagination .btn-prev,
.page_block /deep/ .el-pagination .btn-next {
  padding: 0 6px !important;
  background: none !important;
  margin: 0;
}

/* .el-pagination button {
  margin: 0 !important;
  background: none;
} */

/* .el-pagination .el-button--primary {
  background-color: #2D7DEC !important;
  color: #fff !important;
  margin: 0 0 0 5px !important;
} */
</style>

---

2. 调用

<pages @handleCurrentChangeSub="handleCurrentChangeFun" @handleSizeChangeSub="handleSizeChangeFun"></pages>

// ------------------ 分页 ------------------
handleCurrentChangeFun(v) {
  // 点击的页码、当前页，更新vuex存储的页码
  this.$store.commit('page/change_currPage', v)
  // 调自定义方法更新列表
  this.myFun()
},
handleSizeChangeFun(v) {
  // 选择每页条数，更新vuex存储的每页条数
  this.$store.commit('page/change_pageSize', v)
  // 调自定义方法更新列表
  this.myFun()
},