网站5g空间,wordpress编辑器百度云,公司取名网免费版,黄埔网站建设设计前言#xff1a;在很多后台管理系统开发时总会有很多分页组件的使用#xff0c;如果我们每次都用elementui官网的el-pagination去写的话#xff0c;调整所有分页的样式就会很麻烦#xff0c;而且页面内容也会很累赘繁琐。
讲解一个我经常使用的二次封装el-pagination组件在很多后台管理系统开发时总会有很多分页组件的使用如果我们每次都用elementui官网的el-pagination去写的话调整所有分页的样式就会很麻烦而且页面内容也会很累赘繁琐。
讲解一个我经常使用的二次封装el-pagination组件该组件非常方便快捷。所有例子都是使用vue2elementUI如要使用vue3稍作修改即可也可评论问我
效果展示 一、先上组件代码
templatediv:class{hidden:hidden}classpagination-containerel-pagination:smallsize:backgroundbackground:current-page.synccurrentPage:page-size.syncpageSize:layoutlayout:page-countpageCount:page-sizespageSizes:totaltotalv-bind$attrssize-changehandleSizeChangecurrent-changehandleCurrentChange//div
/templatescript
// import { scrollTo } from /utils/scroll-toexport default {name: Pagination,props: {size: {type: Boolean,default: false},total: {type: Number},pageCount: {type: Number},page: {type: Number,default: 1},limit: {type: Number,default: 20},pageSizes: {type: Array,default() {return [10, 20, 30, 50]}},layout: {type: String,default: total, sizes, prev, pager, next, jumper},background: {type: Boolean,default: true},autoScroll: {type: Boolean,default: true},hidden: {type: Boolean,default: false}},computed: {currentPage: {get() {return this.page},set(val) {this.$emit(update:page, val)}},pageSize: {get() {return this.limit},set(val) {this.$emit(update:limit, val)}}},methods: {handleSizeChange(val) {this.currentPage 1this.$emit(pagination, { page: this.currentPage, limit: val })// if (this.autoScroll) {// scrollTo(0, 800)// }},handleCurrentChange(val) {this.$emit(pagination, { page: val, limit: this.pageSize })// if (this.autoScroll) {// scrollTo(0, 800)// }}}
}
/scriptstyle scoped
.pagination-container {/* background: #fff; */padding: 32px 16px;
}
.pagination-container.hidden {display: none;
}
/style二、使用该组件
1、引入注册该组件 import Pagination from /components/Pagination;2、在需要的html上使用
我一般都是搭配el-table去使用的表格组件封装请看我的另一篇帖子 Paginationv-showtotal 0:totaltotal:page.synclistQuery.page:limit.synclistQuery.limitpaginationlistQueryFn/ 三、解释参数
1、total是总条目数
一般来说后端传过来的表格数据要顺带着传给前端一个总数直接赋值给total就行
2、listQuery对象 listQuery: {page: 1,limit: 10,}, page当前是第几页 limit当前页展示多少条
一般默认都是第一页十条这个listQuery就是要传给后端去获取表格数据的
3、listQueryFn listQueryFn是放前端请求接口的函数我这里红框只是个示意用的时候写成自己的接口就行
一般来说listQueryFn函数需要在页面刚加载的时候就调用一下、页面按搜索按钮的时候也要调用一下再就是用户点击下一页的时候调用。
