Elementui自定义Pagination 上一页下一页使用按钮

一 效果图

二 上代码

<el-button size="small" @click="pervious">上一页</el-button>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="current"
      :page-size="pageSize"
      layout="pager"
      :total="total"
      ref="pageGroup">
    </el-pagination>
    <el-button size="small" @click="next">下一页</el-button>

current-page如果你是封装在组件里面props里面传过来的值是不能直接赋予的因为切换上一页下一页当前页会改变， props里面值不允许修改不然控制台会一直报错

elementui提供的方法

pervious() {
      this.$refs.pageGroup.prev()
    },
    next() {
      this.$refs.pageGroup.next()
    },

调用一下就ok了， 上一页，下一页可以是按钮或者各种自定义的logo都可以， 注意layout里面，文档提供的是箭头的形式

加油加油   顺带写一下继续搬砖

更新组件，自己稍微封装了一下，还可以根据自身修改

<TablePaging :currentPage="currentPage" :total="total" :pageSize="pageSize" @pageChange="pageChange"/>

<template>
  <div class="pageGroup">
    <el-button size="small" @click="pervious">上一页</el-button>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="current"
      :page-size="pageSize"
      layout="pager"
      :total="total"
      ref="pageGroup">
    </el-pagination>
    <el-button size="small" @click="next">下一页</el-button>
  </div>
</template>

<script>
export default {
  name: 'TablePaging',
  props: {
    currentPage: Number,
    pageSize: Number,
    total: Number,
  },
  data() {
    return {
      current: 1,
    }
  },
  watch: {
    currentPage: {
      handler() {
        this.current = this.currentPage
      },
      deep: true,
    },
  },
  created() {
    this.current = this.currentPage
  },
  methods: {
    handleSizeChange(val) {
      console.log(val)
    },
    handleCurrentChange(val) {
      //console.log(val)
      this.$emit('pageChange', val)
    },
    pervious() {
      this.$refs.pageGroup.prev()
    },
    next() {
      this.$refs.pageGroup.next()
    },
  },
}
</script>

<style>
.el-pager li {
  font-size: 12px;
  height: 24px;
  line-height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
}
</style>