此时后端给你一个接口,接口中有两个参数,第一个是每页多少条数据,第二个是显示第几页,那么如何通过这个接口用vue的方式写出翻页功能
时间: 2023-12-22 14:03:12 浏览: 110
首先,在 Vue 中,我们可以使用 axios 发送请求获取接口数据。假设获取的接口数据格式如下:
```json
{
"total": 100,
"data": [
{"id": 1, "name": "张三"},
{"id": 2, "name": "李四"},
{"id": 3, "name": "王五"},
...
]
}
```
其中,`total` 表示总共有多少条数据,`data` 表示当前页的数据列表。接下来就可以通过以下步骤实现翻页功能:
1. 在 Vue 的 data 中定义两个变量 `pageSize` 和 `currentPage`,分别表示每页显示多少条数据和当前页码。
```javascript
data() {
return {
pageSize: 10, // 每页显示10条数据
currentPage: 1, // 当前页码为1
dataList: [] // 接口返回的数据列表
}
},
```
2. 在 created 钩子函数中调用接口获取数据,并将返回的数据列表赋值给 `dataList` 变量。
```javascript
created() {
this.getDataList();
},
methods: {
async getDataList() {
const res = await axios.get('/api/dataList', {
params: {
pageSize: this.pageSize,
pageNum: this.currentPage
}
});
this.dataList = res.data.data;
}
}
```
3. 在模板中渲染数据列表,并添加翻页组件。
```html
<template>
<div>
<ul>
<li v-for="item in dataList" :key="item.id">{{ item.name }}</li>
</ul>
<div>
<el-pagination
:current-page="currentPage"
:page-size="pageSize"
:total="total"
layout="prev, pager, next"
@current-change="handlePageChange">
</el-pagination>
</div>
</div>
</template>
```
其中,`el-pagination` 是 element-ui 的翻页组件,`total` 表示总共有多少条数据,`@current-change` 事件监听当前页码变化,当页码变化时执行 `handlePageChange` 方法。
4. 在 methods 中实现 `handlePageChange` 方法,该方法将接收到的新的页码赋值给 `currentPage` 变量,并重新调用接口获取数据。
```javascript
methods: {
async handlePageChange(newPage) {
this.currentPage = newPage;
await this.getDataList();
},
async getDataList() {
const res = await axios.get('/api/dataList', {
params: {
pageSize: this.pageSize,
pageNum: this.currentPage
}
});
this.dataList = res.data.data;
this.total = res.data.total;
}
}
```
这样就完成了基本的翻页功能。需要注意的是,在接口返回的数据中,除了当前页的数据列表之外,还需要返回总共有多少条数据,以便翻页组件计算总页数。
阅读全文