vue项目 使用elementui中的el-pagination封装公用分页组件

组件页面：pageNation.vue

<template>
  <div class="pagenation">
    <el-pagination small  class="text-center"  @size-change="handleSizeChange" @current-change="handleCurrentChange":current-page=":current-page="page_index"" :page-sizes="pageSizes" :page-size="page.limit"
    layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
   </div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number
    }, // 总条数
    page_index: {
				type: Number
			},
  },
  data() {
    return {
      pageSizes: [10, 20, 50, 100],
      page: {
        page_index: 1,
        page_limit: 10
      }
    };
  },
  methods: {
    // // 每页查看条数变化
    handleSizeChange(val) {
      this.page.page_limit= val;
      this.$emit('pageChange', this.page);
    },
    // 当前页码变化
    handleCurrentChange(val) {
      this.page.page_index= val;
      this.$emit('pageChange', this.page);
    }
  },

}
</script>

<style scoped>
  .pagenation{
    margin: 20px 0;
  }
</style>

使用分页组件

<template>
	<page-nation :total="page_total" @pageChange="pageChange"  :page_index="page_index"></page-nation>
</template>
import pageNation from '@/components/common/pageNation'     // 引入
export default{
  data () {
	    return {
	   	  page_index: 1, // 页数
	      page_total: 1, // 总页数
	      page_size: 10,
	    }
  }，
   components: {
    pageNation
  },
  methods: {
	 pageChange (item) {
	      console.log(item)
	      this.page_index = item.page_index;
	      this.page_size = item.page_limit;
	      this.initData() //改变页码，重新渲染页面
    },
}
 }

---

Tips：【小程序云开发】中高级前端面试题库（源码：小程序中联系我哟）。
---------- 创作不易，感谢大家，请多多支持！