内蒙古城乡建设网站,汕头东莞网站建设,seo及网络推广,ie不能显示wordpress图片分页组件常见于管理系统的列表查询页面#xff0c;数据量巨大时需要分页的操作。 当数据量过多时#xff0c;使用分页分解数据。 1.如何使用#xff1f;
/*设置layout#xff0c;表示需要显示的内容#xff0c;用逗号分隔#xff0c;布局元素会依次显示。prev表示上一页… 分页组件常见于管理系统的列表查询页面数据量巨大时需要分页的操作。 当数据量过多时使用分页分解数据。 1.如何使用
/*设置layout表示需要显示的内容用逗号分隔布局元素会依次显示。prev表示上一页next为下一页pager表示页码列表除此以外还提供了jumper和totalsize和特殊的布局符号--后的元素会靠右显示jumper表示跳页元素total表示总条目数size用于设置每页显示的页码数量。*/div classblockspan classdemonstration页数较少时的效果/spanel-paginationlayoutprev, pager, next:total50/el-pagination
/div
div classblockspan classdemonstration大于 7 页时的效果/spanel-paginationlayoutprev, pager, next:total1000/el-pagination
/div
2.设置最大页码按钮数
//默认情况下当总页数超过 7 页时Pagination 会折叠多余的页码按钮。通过pager-count属性可以设置最大页码按钮数。el-pagination:page-size20:pager-count11layoutprev, pager, next:total1000
/el-pagination
3.带有背景色的分页
//设置background属性可以为分页按钮添加背景色。el-paginationbackgroundlayoutprev, pager, next:total1000
/el-pagination4.小型分页
在空间有限的情况下可以使用简单的小型分页。
//只需要一个small属性它接受一个Boolean默认为false设为true即可启用。el-paginationsmalllayoutprev, pager, next:total50
/el-pagination
5.附加功能
根据场景需要可以添加其他功能模块。
/*使用了size-change和current-change事件来处理页码大小和当前页变动时候触发的事件。page-sizes接受一个整型数组数组元素为展示的选择每页显示个数的选项[100, 200, 300, 400]表示四个选项每页显示 100 个200 个300 个或者 400 个。*/templatediv classblockspan classdemonstration显示总数/spanel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-page.synccurrentPage1:page-size100layouttotal, prev, pager, next:total1000/el-pagination/divdiv classblockspan classdemonstration调整每页显示条数/spanel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-page.synccurrentPage2:page-sizes[100, 200, 300, 400]:page-size100layoutsizes, prev, pager, next:total1000/el-pagination/divdiv classblockspan classdemonstration直接前往/spanel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-page.synccurrentPage3:page-size100layoutprev, pager, next, jumper:total1000/el-pagination/divdiv classblockspan classdemonstration完整功能/spanel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage4:page-sizes[100, 200, 300, 400]:page-size100layouttotal, sizes, prev, pager, next, jumper:total400/el-pagination/div
/template
scriptexport default {methods: {handleSizeChange(val) {console.log(每页 ${val} 条);},handleCurrentChange(val) {console.log(当前页: ${val});}},data() {return {currentPage1: 5,currentPage2: 5,currentPage3: 5,currentPage4: 4};}}
/script 6.当只有一页时隐藏分页
当只有一页时通过设置 hide-on-single-page 属性来隐藏分页。
divel-switch v-modelvalue/el-switchel-pagination:hide-on-single-pagevalue:total5layoutprev, pager, next
/el-pagination
/divscriptexport default {data() {return {value: false}}}
/script
