用途:el-pagination 是 Element Plus 提供的分页组件,用于把大量数据拆分为多页,改善展示体验与性能,可用于分页数据、搜索结果导航、控制当前页与每页条数、显示总数与页码信息。
主要能力:支持 v-model:current-page 与 v-model:page-size 双向绑定;通过 layout 组合 sizes、prev、pager、next、jumper、total、slot 等元素,其中 -> 后的元素右对齐;支持 background 背景色、size 尺寸、pager-count 页码数量、hide-on-single-page、disabled、prev-text/next-text、prev-icon/next-icon、page-sizes、popper-class、popper-style、teleported 等属性。事件包含 size-change、current-change、change、prev-click、next-click。
使用方式:基础写法为 <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10,20,30,40]" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />。可与 el-table 搭配,通过 change 事件调用接口按 page 与 size 重新取数并更新 total;也可用 layout 中的 slot 自定义内容。
适用场景:表格或卡片列表的分页展示、搜索结果翻页、移动端紧凑布局(size="small" 或简化 layout)。
限制:需设置 total 或 page-count;small 属性已废弃,应改用 size="small";事件仍可用但推荐使用 v-model 绑定。