基于vue- element 分页器封装

组件分装

<template>
  <div class="pagination">
    <el-pagination background
                   :page-sizes="pageSizes"
                   :page-size.sync="size"
                   :current-page.sync="current"
                   :layout=" layout"
                   :total="total"
                   :disabled="disabled"
                   @current-change="handleCurrentChange"
                   @size-change="handleSizeChange"
                   class="right">
    </el-pagination>
  </div>

</template>

<script>
export default {
  props: {
    //每页显示条数
    pageSize: {
      type: [String, Number],
      default: 10,
    },
    //默认在第几页
    currentPage: {
      type: [String, Number],
      default: 1,
    },
    //总条数
    total: {
      type: [String, Number],
      default: 0,
    },
    //每页可选显示条数
    pageSizes: {
      type: Array,
      default: () => {
        return [10, 20, 50, 100]
      },
    },
    //布局设计
    layout: {
      type: String,
      default: 'total,prev, pager, next, sizes',
    },
    disabled:{
      type:Boolean,
      default:false
    }
  },
  computed: {
    current: {
      get() {
        return this.currentPage
      },
      set(val) {
        this.$emit('update:currentPage', val) //改变当前为第几页的值赋值给父组件
      },
    },
    size: {
      get() {
        return this.pageSize
      },
      set(val) {
        this.$emit('update:pageSize', val) //改变当前页显示几条数据的值赋值给父组件
      },
    },
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('pagination', { currentPage: 1, pageSize: val })
    },
    handleCurrentChange(val) {
      this.$emit('pagination', { currentPage: val, pageSize: this.pageSize })
    },
  },
}
</script>

使用组件

<template>
   <Pagination
    :total="total"
    :currentPage.sync="currentPage"
    :pageSize.sync="pageSize"
    @pagination="handlePageChange"
  />
</template>
<script>
	export default{
		 data() {
		    return {
		    	total: 0,
		    	pageSize: 10,
      			currentPage: 1,
		    }
		},
		methods:{
		    handlePageChange(data) {
		      this.currentPage = data.currentPage;
		      this.pageSize = data.pageSize;
		      this.getDataAsync();
		    },
		}
	}
</script>