elment plus分页组件使用
时间: 2023-12-24 21:03:41 浏览: 102
Element Plus 是一套基于 Vue 3 的 UI 组件库,其中包含了分页组件。使用 Element Plus 的分页组件非常简单,只需要在需要使用分页的页面中导入分页组件,然后在模板中使用即可。
以下是一个简单的示例代码:
```html
<template>
<div>
<el-pagination
:total="total"
:current-page="currentPage"
:page-size="pageSize"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
import { ref } from 'vue';
import { ElPagination } from 'element-plus';
export default {
components: { ElPagination },
setup() {
const total = ref(100); // 总记录数
const currentPage = ref(1); // 当前页码
const pageSize = ref(10); // 每页显示的记录数
// 当前页码改变时的回调函数
function handleCurrentChange(newPage) {
currentPage.value = newPage;
// 在这里可以根据新的页码重新获取数据
}
return {
total,
currentPage,
pageSize,
handleCurrentChange
};
}
};
</script>
```
在模板中,使用 `el-pagination` 标签渲染分页组件,通过绑定 `total`、`current-page` 和 `page-size` 三个属性来设置总记录数、当前页码和每页显示的记录数。通过监听 `current-change` 事件来处理页码改变时的回调函数。在 `setup` 中,使用 `ref` 创建响应式数据,然后将回调函数和数据绑定到模板中。
当用户点击分页组件中的页码时,会触发 `current-change` 事件,将新的页码作为参数传递给回调函数 `handleCurrentChange`,在回调函数中可以根据新的页码重新获取数据。
阅读全文