vue分页查询怎么实现
时间: 2023-07-07 11:28:27 浏览: 106
Vue 分页查询可以通过以下步骤来实现:
1. 在 Vue 组件中定义一个变量来存储当前页码和每页显示的数据条数。
2. 在模板中使用 v-for 指令渲染数据列表,同时将数据列表按照当前页码和每页显示的数据条数进行切割。
3. 在模板中使用 v-if 指令控制上一页和下一页按钮的显示和隐藏。
4. 在点击上一页和下一页按钮时,更新当前页码的值,并重新渲染数据列表。
下面是一个简单的示例:
```html
<template>
<div>
<ul>
<li v-for="item in pagedData">{{ item }}</li>
</ul>
<button v-if="currentPage > 1" @click="currentPage--">上一页</button>
<button v-if="currentPage < pageCount" @click="currentPage++">下一页</button>
</div>
</template>
<script>
export default {
data() {
return {
currentPage: 1, // 当前页码
pageSize: 10, // 每页显示的数据条数
data: [...], // 所有数据列表
};
},
computed: {
// 计算分页后的数据列表
pagedData() {
const startIndex = (this.currentPage - 1) * this.pageSize;
const endIndex = startIndex + this.pageSize;
return this.data.slice(startIndex, endIndex);
},
// 计算总页数
pageCount() {
return Math.ceil(this.data.length / this.pageSize);
},
},
};
</script>
```