element ui分页使用
时间: 2023-11-03 08:07:03 浏览: 83
element-ui的分页使用方式.docx
好的,关于element ui分页的使用,你可以按照以下步骤进行:
1. 在需要使用分页的页面中引入element ui的分页组件:
```
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
```
2. 在data中定义currentPage和pageSize两个变量,并在methods中定义handleSizeChange和handleCurrentChange两个方法:
```
data() {
return {
currentPage: 1,
pageSize: 10,
total: 100
}
},
methods: {
handleSizeChange(val) {
this.pageSize = val;
//重新获取数据
this.getData();
},
handleCurrentChange(val) {
this.currentPage = val;
//重新获取数据
this.getData();
}
}
```
3. 在getData方法中根据currentPage和pageSize获取对应的数据,并更新total变量:
```
getData() {
//根据currentPage和pageSize获取对应的数据
//...
//更新total变量
this.total = data.total;
}
```
阅读全文