这几天在做一个管理系统,然后遇到了一个分页的问题,因为一开始就是用vue结合elementui开发的,所以分页就用到了elementui的分页功能,但是官网给的例子不符合我开发的需求,所以呢,就需要进行改造,关键是怎么改造呢,
重点来了slot插槽
上面的图片, 展示的是我这次要实现的效果,我看了官网的,有一个跟我的很像,但还是有区别
现在呢,我们就根据这个代码进行改造哈
直接附上我的代码了哈,困了,有不懂的可以留言,
<div class="block">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total, sizes, slot,prev" :total="total">
<div class="first-pager" @click="jumpPage('1')">首页</div>
</el-pagination>
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="pager,next,slot, jumper" :total="total">
<div class="last-pager" @click="jumpPage('0')">末页</div>
</el-pagination>
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="slot" :total="total">
<div class="ensure-btn" @click="clickEnter()">确定</div>
</el-pagination>
</div>
js部分
jumpPage(val){
switch(val){
case "1"://跳转到首页
this.$emit('changeCurrentPage', 1);
break;
case "0"://跳转到末页
this.$emit('changeCurrentPage', this.total/this.pageSize);
break;
}
},
clickEnter(){
this.$emit('changeCurrentPage', this.currentPage);
}
还是得说一下,我是把分页的单独作为一个组件,然后进行调用的,所以引用的时候,会用到组件之间的传值的知识点,
不懂的,看我前面的博客,地址组件之间传值,这个里面只是提到了父子组件直接传值,其实还有一个方式,就是vuex,具体的自己看官网吧,讲的挺详细的。
over