vue（九）：elementUI分页插件的插槽slot的用法 - 好文

这几天在做一个管理系统，然后遇到了一个分页的问题，因为一开始就是用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); }
还是得说一下，我是把分页的单独作为一个组件，然后进行调用的，所以引用的时候，会用到组件之间的传值的知识点，
不懂的，看我前面的博客，地址组件之间传值
<https://blog.csdn.net/fiona_lms/article/details/80077177>
，这个里面只是提到了父子组件直接传值，其实还有一个方式，就是vuex，具体的自己看官网吧，讲的挺详细的。
over

热门工具换一换