<el-pagination background layout="prev, pager, next" :total="1000"> </el-pagination>添加change事件
时间: 2024-12-23 11:23:15 浏览: 4
这个HTML代码片段展示了如何在一个Element UI (Vue.js) 中使用`el-pagination`组件。`el-pagination`是一个用于分页展示的数据组件,背景样式(`background`)设置为有背景色,布局设为"上一页", "当前页", "下一页"。
`layout="prev, pager, next"`指定了默认的页面布局。`:total="1000"`表示总共有1000页数据。
如果你想给这个分页器添加一个`change`事件处理,可以在Vue组件的模板里绑定一个自定义的`handleChange`函数,如下所示:
```html
<template>
<div>
<el-pagination
background
layout="prev, pager, next"
:total="1000"
@current-change="handleChange"
></el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleChange(currentPage) {
console.log('当前页改变到了第', currentPage, '页');
// 这里可以添加你的实际业务逻辑
},
},
};
</script>
```
在这个例子中,当用户翻动页面时,`handleChange`方法会被触发,传入新的当前页数作为参数。你可以根据需要更新状态或者执行其他操作。
阅读全文