vue分页功能实现
时间: 2023-07-12 08:16:22 浏览: 52
Vue 分页功能的实现需要前端和后端共同配合完成。下面是一个简单的示例:
前端:使用 Vue.js 实现分页功能
1. 在 Vue 组件中定义分页数据:
```
data() {
return {
currentPage: 1, // 当前页码
pageSize: 10, // 每页显示的数据数量
total: 0, // 总数据量
dataList: [] // 当前页的数据列表
}
}
```
2. 定义方法,处理页码切换:
```
methods: {
handlePageChange(page) {
this.currentPage = page
this.getList()
}
}
```
3. 调用后端接口获取数据列表:
```
getList() {
axios.get('/api/list', {
params: {
page: this.currentPage,
pageSize: this.pageSize
}
}).then(res => {
this.dataList = res.data.list
this.total = res.data.total
})
}
```
4. 在模板中渲染分页组件:
```
<Pagination
:current="currentPage"
:total="total"
:page-size="pageSize"
@current-change="handlePageChange"
/>
```
后端:使用 Node.js + Express 实现分页接口
1. 接收前端传递的页码和每页数量:
```
app.get('/api/list', (req, res) => {
const { page, pageSize } = req.query
// ...
})
```
2. 查询总数据量:
```
const total = await db.collection('data').countDocuments()
```
3. 查询当前页的数据:
```
const dataList = await db.collection('data')
.find()
.skip((page - 1) * pageSize)
.limit(pageSize)
.toArray()
```
4. 返回数据:
```
res.json({
list: dataList,
total
})
```
以上是一个简单的前后端配合实现Vue分页功能的示例,具体实现还需要根据业务需求进行调整。