Element UIVue 2.0Pagination 分页组件完全指南布局、事件与源码实现剖析【免费下载链接】elementA Vue.js 2.0 UI Toolkit for Web项目地址: https://gitcode.com/gh_mirrors/eleme/element当单页需要展示的数据量过大时使用分页Pagination将数据拆解到多页是最常见的交互方案。本文以 Element UIVue 2.0 UI Toolkit官方文档 examples/docs/es/pagination.md 为主体系统讲解el-pagination的布局体系、页码折叠机制、每页条数切换、跳页输入、事件回调与自定义插槽并结合仓库内 组件源码 与 单元测试 深入剖析其底层实现。读完本文你将能够根据业务场景自由组合分页模块、正确使用page-size/current-page的.sync双向绑定并理解页码折叠与事件去重的内部原理。基础用法用layout声明分页元素el-pagination的核心设计是可组合布局通过layout属性用逗号分隔的方式声明需要显示哪些分页元素布局元素会按书写顺序依次渲染。分页元素包括元素含义prev上一页按钮next下一页按钮pager页码列表jumper跳页输入框输入页码后按回车跳转total总条目数sizes每页条数下拉选择器select-特殊布局符号位于其后的所有元素将被推到右侧显示div classblock span classdemonstration页数较少时的效果/span el-pagination layoutprev, pager, next :total50 /el-pagination /div div classblock span classdemonstration大于 7 页时的效果/span el-pagination layoutprev, pager, next :total1000 /el-pagination /div从源码看layout的解析在 pagination.js 的render函数中完成layout.split(,)后将每个元素trim再通过TEMPLATE_MAP映射到对应的子组件当遇到-时其后的组件被放入el-pagination__rightwrapper右浮动容器中从而实现靠右显示的效果。默认layout为prev, pager, next, jumper, -, totalpagination.js即默认展示上一页、页码、下一页、跳页输入框以及靠右的总条数。设置最大页码按钮数pager-count默认情况下当总页数超过 7 页时Pagination 会折叠多余的页码按钮只在首尾保留页码中间用省略号...代替。通过pager-count属性可以自定义这一阈值el-pagination :page-size20 :pager-count11 layoutprev, pager, next :total1000 /el-pagination在源码中pager-count是一个带校验器的 proppagination.jspagerCount: { type: Number, validator(value) { return (value | 0) value value 4 value 22 (value % 2) 1; }, default: 7 }也就是说pager-count必须是大于等于 5 且小于等于 21 的奇数默认值为 7。这一约束保证了折叠算法的对称性在 pager.vue 的pagers计算属性中halfPagerCount (pagerCount - 1) / 2再结合当前页currentPage与总页数pageCount判断是否显示左省略号showPrevMore或右省略号showNextMore当currentPage pagerCount - halfPagerCount时显示左侧省略号当currentPage pageCount - halfPagerCount时显示右侧省略号若两侧都省略则中间显示以当前页为中心的连续页码区间。点击省略号本身还可以快速向前/向后翻动pagerCount - 2页见 pager.vue 的onPagerClick与btn-quickprev/btn-quicknext逻辑鼠标悬停时省略号会变为双向箭头图标。小型分页small在空间有限的场景如表格工具栏、弹窗底部下可以启用小型分页样式。只需要一个small属性它接受Boolean默认为false设为true即可el-pagination small layoutprev, pager, next :total50 /el-pagination从源码看small与background一样会反映在根元素的 class 上pagination.jslet template div class{[el-pagination, { is-background: this.background, el-pagination--small: this.small }] }/div;对应的紧凑样式按钮高度 22px、字号 12px 等定义在主题样式文件 packages/theme-chalk/src/pagination.scss 的m(small)修饰类中。为分页按钮添加背景色background虽然西语文档正文未单列此小节但中文版与英文版文档examples/docs/zh-CN/pagination.md、examples/docs/en-US/pagination.md以及源码中均已支持设置background属性可以为分页按钮添加背景色el-pagination background layoutprev, pager, next :total1000 /el-pagination该属性在源码 props 中定义为background: Booleanpagination.js默认false启用后根元素会增加is-background类按钮背景色样式由 pagination.scss 提供。附加功能组合完整的业务分页根据实际场景可以自由叠加多个功能模块。下面的完整用例使用了size-change与current-change事件来处理每页条数和当前页变化时的回调page-sizes接受一个整型数组数组元素即为下拉选择器中可选的每页条数例如[100, 200, 300, 400]表示四个选项每页显示 100、200、300 或 400 条。template div classblock span classdemonstration显示总数/span el-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-page.synccurrentPage1 :page-size100 layouttotal, prev, pager, next :total1000 /el-pagination /div div classblock span classdemonstration调整每页显示条数/span el-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-page.synccurrentPage2 :page-sizes[100, 200, 300, 400] :page-size100 layoutsizes, prev, pager, next :total1000 /el-pagination /div div classblock span classdemonstration直接前往/span el-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-page.synccurrentPage3 :page-size100 layoutprev, pager, next, jumper :total1000 /el-pagination /div div classblock span classdemonstration完整功能/span el-pagination size-changehandleSizeChange current-changehandleCurrentChange :current-page.synccurrentPage4 :page-sizes[100, 200, 300, 400] :page-size100 layouttotal, sizes, prev, pager, next, jumper :total400 /el-pagination /div /template script export default { methods: { handleSizeChange(val) { console.log(每页 ${val} 条); }, handleCurrentChange(val) { console.log(当前页: ${val}); } }, data() { return { currentPage1: 5, currentPage2: 5, currentPage3: 5, currentPage4: 4 }; } } /script该用例覆盖了total总条数展示、sizes每页条数选择器、jumper跳页输入框三种附加模块。几个值得注意的要点current-page与page-size均支持.sync修饰符组件内部通过$emit(update:currentPage, newVal)与$emit(update:pageSize, val)同步回父组件见 pagination.js因此外部数据源始终与组件内部状态保持一致。page-sizes默认值为[10, 20, 30, 40, 50, 100]pagination.js。当page-size不在page-sizes列表中时sizes子组件会回退选中列表第一个值pagination.js这一点在 单元测试 的pageSizes:not found pageSize用例中得到了验证。sizes与jumper内部复用了 Element 的el-select与el-input组件pagination.js所以popper-class属性可以自定义每页条数下拉框的类名。jumper输入框的范围被限制在[1, internalPageCount]之间非法输入小于 1、大于总页数、非数字会被getValidCurrentPage自动修正pagination.js测试用例 pagination.spec.js 与 pagination.spec.js 验证了输入 0、1000 或非数字时均会回退到合法页码。当只有一页时隐藏分页hide-on-single-page当数据只有一页时分页组件往往没有展示价值。通过设置hide-on-single-page属性Pagination 会在总页数为 1或未提供total/page-count时直接渲染为空注释节点div el-switch v-modelvalue /el-switch el-pagination :hide-on-single-pagevalue :total5 layoutprev, pager, next /el-pagination /div script export default { data() { return { value: false } } } /script源码中的判断位于render函数开头pagination.jsif (this.hideOnSinglePage (!this.internalPageCount || this.internalPageCount 1)) return null;即当hideOnSinglePage为true且计算出的总页数为 0 或 1 时直接返回null。对应的单元测试 pagination.spec.js 断言此时vm.$el.nodeType为COMMENT_NODE确认组件被完全卸载。Attributes完整属性表参数说明类型可选值默认值small是否使用小型分页样式boolean—falsebackground是否为分页按钮添加背景色boolean—falsepage-size每页显示条目个数支持.sync修饰符number—10total总条目数number——page-count总页数total和page-count设置任意一个就可以达到显示页码的功能如果要支持page-sizes的更改则需要使用total属性Number——pager-count页码按钮的数量当总页数超过该值时会折叠number大于等于 5 且小于等于 21 的奇数7current-page当前页数支持.sync修饰符number—1layout组件布局子组件名用逗号分隔Stringsizes,prev,pager,next,jumper,-,total,slotprev, pager, next, jumper, -, totalpage-sizes每页显示个数选择器的选项设置number[]—[10, 20, 30, 40, 50, 100]popper-class每页显示个数选择器的下拉框类名string——prev-text替代图标显示的上一页文字string——next-text替代图标显示的下一页文字string——disabled是否禁用boolean—falsehide-on-single-page只有一页时是否隐藏boolean——关于total与page-count的关系源码在internalPageCount计算属性中做了明确处理pagination.js优先使用total通过Math.max(1, Math.ceil(total / internalPageSize))计算总页数否则使用pageCount。若两者都未提供总页数为null此时分页组件仅保留上一页/下一页的翻页能力而无法渲染页码列表。另外当total变化导致总页数小于当前页时组件会自动将当前页钳制到最大页数见 pagination.js 的internalPageCountwatcher。prev-text与next-text用于在需要纯文字而非图标时替换默认的左右箭头源码中Prev/Next子组件在提供了对应文字时渲染span否则渲染el-icon-arrow-left/el-icon-arrow-right图标pagination.js。同时prev按钮在第一页时、next按钮在最后一页时或总页数为 0 时会被自动置为disabled。Events事件回调事件名称说明回调参数size-changepageSize 改变时会触发每页条数current-changecurrentPage 改变时会触发当前页prev-click用户点击上一页按钮改变当前页后触发当前页next-click用户点击下一页按钮改变当前页后触发当前页事件触发逻辑位于 pagination.jsprev()/next()会先校验disabled计算新页码后分别$emit(prev-click, ...)/$emit(next-click, ...)再调用emitChange()emitChange()借助lastEmittedPage与userChangePageSize做事件去重只有当内部页码确实变化或用户主动修改了每页条数时才通过$nextTick发出current-changepagination.js。对应的测试用例 pagination.spec.js 验证了连续点击 9 次下一页再点上一页才会触发一次current-change以及手动将current-page改回原值不会重复触发。Slot自定义插槽name说明—自定义内容需要在layout中列出slotel-pagination支持默认插槽用于在分页条中插入自定义内容如刷新按钮、统计信息等。使用时必须在layout中声明slot元素源码在TEMPLATE_MAP中将其渲染为slotpagination.jsel-pagination layoutslot, prev, pager, next :page-size25 :total100 span classslot-test自定义内容/span /el-pagination对应的 单元测试 验证了自定义内容能够被正确渲染到分页条内。源码实现要点小结组件注册el-pagination通过 packages/pagination/index.js 以Pagination.install方式全局注册组件名为ElPagination。内部状态组件维护internalCurrentPage、internalPageSize两套内部变量与外部 propscurrentPage、pageSize通过 watcher 双向同步pagination.js任何非数字输入如NaN都会回退到默认值这一行为同样有测试覆盖pagination.spec.js。布局渲染全部子组件Prev、Next、Pager、Sizes、Jumper、Total、slot均在 pagination.js 内以渲染函数方式内联定义-之后的内容进入右浮动容器。页码折叠折叠算法集中在 pager.vue 的pagers计算属性与onPagerClick方法中通过省略号按钮实现批量翻页。综上Element UI 的 Pagination 组件以布局可组合、状态可同步、边界自动钳制为设计主线配合size-change、current-change、prev-click、next-click四个事件即可覆盖绝大多数列表分页需求若需要更多源码细节可继续阅读 组件源码、页码渲染实现 与 完整单元测试。【免费下载链接】elementA Vue.js 2.0 UI Toolkit for Web项目地址: https://gitcode.com/gh_mirrors/eleme/element创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考