首页el-pagination分页的jumper值

el-pagination分页的jumper值

时间: 2025-01-17 14:02:08 浏览: 63

### 设置或获取 `el-pagination` 组件中 Jumper 的当前页码值 #### 获取当前页码值为了获取 `el-pagination` 中的当前页码，可以利用组件提供的 `currentPage` 属性。此属性表示当前选中的页面编号，在 Vue 实例内可以通过双向绑定的方式轻松访问该数值。 ```javascript data() { return { currentPage: 1 // 默认第一页被选中 }; }, methods: { handleCurrentChange(val) { console.log(`当前页: ${val}`); } } ``` 每当用户通过点击分页按钮或是输入跳转到特定页数时，都会触发 `handleCurrentChange` 方法，并传递新的页码作为参数[^2]。 #### 设置当前页码值要主动设置 `el-pagination` 当前展示的页码，只需更新与之关联的数据模型即可。例如： ```html <template> <div class="block"> <span class="demonstration">直接前往</span> <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="jumper, prev, pager, next" :total="total"> </el-pagination> </div> </template> <script> export default { data() { return { currentPage: 5, pageSize: 10, total: 1000 }; }, }; </script> ``` 在这个例子中，`:current-page.sync="currentPage"` 使用了 `.sync` 修饰符来实现父子组件间的状态同步，使得修改 `currentPage` 变量可以直接影响到分页器所处的位置。对于 `Jumper` 输入框内的值变化同样适用上述机制；即无论是手动更改还是程序控制改变 `currentPage` 都能即时反映在界面上并触发改变事件处理函数。

阅读全文