为什么二次封装

一般在后台管理项目当中，页面功能涉及到的数据展示的地方会比较多，而其中却少不了表格，分页以及条件检索。如果代码是 copy 来又 copy 去，岂不是很没有技术含量。

而且每个项目的UI设计师，都有自己的想法。

按照我们的直男思想，UI组件的配色啊风格啊那不挺好的嘛～ 你不用设计，我不用改样式，香香～

不过我们也要尊重人家的劳动成果，当设计风格和 ui 框架提供的样式风格或者布局出现了差异，还是要手动的来实现一下

另外一点，就是如果需求改一点东西，假如你的分页真的是 copy 来 copy 去的，那恭喜你，有的改了。

基于以上的种种原因吧，elementui 的分页组件的二次封装就应时而生了。

子组件代码

在分页子组件中，我们只需要关注三个地方

当前页是第几页，

共有多少页，

每页显示多少条数据

很显然，默认的当前页肯定是第一页，

每页显示多少条数据，需要用户自己来定义，用户没有选择的话我们给一个默认值

而共有多少页，需要看后台返回的数据总数量，除以每页显示的数据量 简单来说，就是 Math.ceil(count / pageSize)

根据 elementui 的分页，我们可以这样定义自己的分页组件代码：

//components/page/index.vue<template><el-paginationbackgroundlayout="slot,prev,pager,next":current-page.sync="currentPage":page-size="pageSize"prev-text="上一页"next-text="下一页":total="count"@current-change="handleCurrentChange"><spanv-html="`共${count}条&nbsp;&nbsp;&nbsp;共${pages}页`"/></el-pagination></template>

这里面通过内置组件 slot 来定义一些个人风格的展示效果，然后我们在 script 中定义子组件需要的参数，这里需要两个参数

总的数据量

每页显示的条目数量

props:{count:{type:Number,default:0},pageSize:{type:Number,default:10}},

其中的 count 来源于接口API返回的总数据量，而 pageSize 就是我定义的每页显示的数据量，用户可以自己根据需要来设置，默认是显示10条数据

然后利用计算属性，来计算共有多少页

computed:{pages(){returnMath.ceil(this.count/this.pageSize)}},

同时，我们要需定义当前的默认的页码

data(){return{currentPage:1//默认当前页显示第一页}},

最后来定义翻页事件，这个事件在用户点击具体的页码，或者上一页、下一页的按钮来触发

因为我们在绑定currentPage 用了 .sync 修饰符，所以这个属性会自动接收更新后的值，就不需要我们再做什么赋值操作了

在事件内部，通过$emit这个方法，我们将当前跳转的页码传递给父组件用于获取更新后的数据

methods:{handleCurrentChange(page){//点击页码事件，通知父组件this.$emit('pageEvent',this.currentPage)}}

这样，一个子组件就完成了。

下面看看如何在父组件中使用。

在父组件中的使用

<template><div><el-tablev-loading="loading":data="data"/><my-pagination:count="count"@pageEvent="fetchData"/></div></template><script>//首先，我们先引入这个子组件，并在父组件中注册importmyPaginationfrom'@/components/page/index'import{getLog}from'@/api/user'exportdefault{//然后在父组件中注册子组件components:{myPagination},data(){return{loading:true,page:1,data:[],count:0}},methods:{fetchData(currentpage){if(typeofcurrentpage==='number'){//切换页码this.page=currentpage}else{//在输入检索条件进行查询的时候，将当前页设置为1this.page=1}const{page,searchKey}=thisgetLog({page,searchKey}).then(r=>{this.data=r.resultsthis.count=r.count}).catch().finally(this.loading=false)}}}</script>

在多个父组件中，我们都可以以同样的方式引入注册并使用。

如果后面有任何的需求更改，我们直接更改 /components/page/index.vue 就可以了，而不必在每个使用的地方都修改一次。

小伙伴有更好的想法欢迎在评论里留言哦～

作者：晴天同学