可自定义（基于element分页器二次封装）的分页组件

---

前言

•  由于element官网的分页器有一些缺陷导致不够个性化定制，特此对其组件进行二次封装。

---

一、分页器是什么？

• 浏览文章会有很多的页码，就需要分页来实现，因为不可能把所有的页码放在文章列表的下面。这时候我们可以联系到数据库的分页查询：

select * from table WHERE … LIMIT 10; #返回前10行
select * from table WHERE … LIMIT 0,10; #返回前10行
select * from table WHERE … LIMIT 10,20; #返回第10-20行数据

• 一般我们用于查询非常多的数据的时候可以这样做，提高查询的效率，我们在项目中使用的时候就会发现前后端都需要进行分页，后端我们可以通过对数据库里的数据进行分页查询直接获取到数据，但是我们如何对前端页面进行分页及分页的数据传到后端呢?
• 引入能够快速对数据进行分页的组件：https://element-plus.gitee.io/#/zh-CN/component/pagination
• 对element分页器有了解的可以参考并进行对比我的这篇文章，能更好的体会到封装对我们后续开发的重要行性。

二、使用步骤

1.安装element-ui组件。

• 不多说，参考官网

npm install element-ui --save

2.新建pageination.vue组件（复制下方代码）

<template>
  <div class="inner">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="pageSizes"
        :page-size="pagesize"
        :layout="layout"
        :total="totalData"
        :background="background"
        :small="small"
        :prev-text="prev_text"
        :next-text="next_text"
    ></el-pagination>
  </div>
</template>
<script>
export default {
  name:'pageination',
  data() {
    return {
      pageParams: {
        pageCurrent: 1,  // 当前页
        pageSize: this.pagesize    // 每页的条数
      },
    };
  },
  /*
  约定：
      totalData为Number类型且大于0；
      layout为String字符串，可选项：sizes, prev, pager, next, jumper, ->, total, slot
  * */
  props: {
    totalData:Number,
    /*下面是使用的时候可选属性设置*/
    layout:{
      type:String,
      default:'prev,pager,next'
    },
    prev_text:{
      type:String,
      default:'◀'
    },
    next_text:{
      type:String,
      default:'▶'
    },
    small:{
      type:Boolean,
      default:false
    },
    background:{
      type:Boolean,
      default:false
    },
    pagesize:{
      type:Number,
      default:2
    },
    pageSizes:{
      type:Array,
      default:function(){
			return [2,4,6,8]
		}
    }
  },
  methods: {
    // 改变每页展示的数据大小
    handleSizeChange(val) {
      /**
       * 当触发事件改变了值 修改 pageParams 中的值 = val 然后触发绑在子组件上的父组件的事件
       *  将值传过去
       * 在父组件的事件里面 将得到的值修改到 pageParams 中 然后调用接口函数重新获取数据
       * pageBar 自定义的 方法
       */
      this.pageParams.pageSize = val;
      this.$emit("pageChange", this.pageParams);
    },
    // 改变当前页的页码
    handleCurrentChange(val) {
      this.pageParams.pageCurrent = val;
      this.$emit("pageChange", this.pageParams);
    }
  },
};
</script>
<style scoped>
.el-pagination button,
.el-pagination span:not([class*="suffix"]) {
  font-size: 12px;
}
.el-icon-refresh-right {
  float: right;
  margin-top: 4.2%;
  font-size: 23px;
  font-weight: lighter;
  margin-right: 1%;
  color: #606266;
  cursor: pointer;
}
/*这里是可以修改分页数字背景颜色的*/
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color:rgb(63,81,181);
  color: #fff;
}
</style>

3.其它组件中使用pageination.vue

ⅰ. 导入组件，添加需要的分页属性和方法实现

import pageination from "@/views/commons/pageination";
export default{
	name:'' //组件名,
	components:{
		pageination
	},
	data(){
		return{
			/*使用该分页器就必须要初始化的数据属性*/
			perPage_data:[],//每一页的数据
			currentPage:1,//跳转到第几页
			total_data:10,//总共有多少条数据
			/*可选的初始化设置属性*/
			isSmall:true, //是否缩小分页器尺寸,
			pagesize:5, //每页多少数据
			pageSizes:[5,10] //可选每页的数据容量，设置为pagesize的整数倍即可
			//.....
		}
	},
	method:{
		handleChangePage(val){
		//向后端请求数据
      this.$axios({
        url:'/api/index',
        method:'post',
        data:val
      }).then(res=>{
        this.perPage_data = res.data
      }).catch(err=>{
        console.log(err)
      })
    }
	}
}

ⅱ.组件模板中的引入

<temlplate>
	<div>
		<ul>
			<li v-for="(item,index) in perPage_data" :key="index"></li>
		</ul>
		<!--具体属性可按照上面约定配置-->
		<pageination
			:total-data="total_data"
			@pageChange="handleChangePage"
			:layout="total,prev,pager,next"
		></pageination>		
	</div>
</template>

ⅲ.后端接收到的参数的处理?

如前面所说，将数据值通过后端写的方法将值传给所用到的查询语句中即可：

select * from table limit #{(currentPage-1)*pagesize},#{pagesize}

总结

• 以上就是我对分页器组件的二次封装，欢迎大家提出宝贵意见，对代码进行更加完善。
• 如有纰漏，欢迎指正！