[TOC]

使⽤ Element 的 Pagination 分⻚组件 -> 附加功能 -> 完整功能设置

// Element 官⽅示例: 分⻚组件完整功能 @size-change=“handleSizeChange” @current-change=“handleCurrentChange” :current-page=“currentPage4” :page-sizes=“[100, 200, 300, 400]” :page-size=“100” layout=“total, sizes, prev, pager, next, jumper” :total=“400”> methods: { handleSizeChange(val) { console.log(每⻚ ${val} 条); }, handleCurrentChange(val) { console.log(当前⻚: ${val}); } }, data() { return { currentPage1: 5, currentPage2: 5, currentPage3: 5, currentPage4: 4 }; }

将结构、⽅法、数据添加到 list.vue 中

// list.vue class=“box-card”> :data=“resources” style=“width: 100%; margin-bottom: 20px;”> @size-change=“handleSizeChange” @current-change=“handleCurrentChange” :current-page=“currentPage4” :page-sizes=“[100, 200, 300, 400]” :page-size=“100” layout=“total, sizes, prev, pager, next, jumper” :total=“400”> </el-card>