elementUI完整分页
时间: 2023-06-22 10:43:45 浏览: 81
ElementUI综合案例(分页)
ElementUI提供了一个完整的分页组件,可以方便地进行分页操作。以下是一个完整的ElementUI分页示例:
```html
<template>
<div>
<el-pagination
:current-page="currentPage"
:page-size="pageSize"
:total="total"
layout="prev, pager, next"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1,
pageSize: 10,
total: 100,
};
},
methods: {
handleCurrentChange(val) {
this.currentPage = val;
// TODO: 请求数据
},
},
};
</script>
```
在这个示例中,使用了`el-pagination`组件来进行分页操作。其中,`current-page`表示当前页码,`page-size`表示每页显示条数,`total`表示总条数。`layout`属性用来指定分页组件的布局,可以自定义各个部分的显示方式。`@current-change`事件用来监听当前页码的变化,并在变化时请求数据。
阅读全文