用Vue实现前端分页
时间: 2023-07-12 16:16:22 浏览: 66
好的,下面是一个简单的使用Vue实现前端分页的示例:
```html
<template>
<div>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in displayData" :key="index">
<td>{{ startIndex + index }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.gender }}</td>
</tr>
</tbody>
</table>
<div class="pagination">
<button @click="prevPage" :disabled="currentPage === 1">上一页</button>
<button v-for="page in pages" :key="page" @click="changePage(page)" :class="{ active: currentPage === page }">{{ page }}</button>
<button @click="nextPage" :disabled="currentPage === pageCount">下一页</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
dataList: [
{ name: '张三', age: 20, gender: '男' },
{ name: '李四', age: 22, gender: '女' },
{ name: '王五', age: 25, gender: '男' },
{ name: '赵六', age: 21, gender: '女' },
{ name: '孙七', age: 24, gender: '男' },
{ name: '周八', age: 26, gender: '女' },
{ name: '吴九', age: 23, gender: '男' },
{ name: '郑十', age: 28, gender: '女' }
],
pageSize: 3, // 每页显示数量
currentPage: 1, // 当前页码
startIndex: 0, // 当前页数据的起始下标
pageCount: 0 // 总页数
}
},
computed: {
// 计算当前显示的数据
displayData() {
return this.dataList.slice(this.startIndex, this.startIndex + this.pageSize)
},
// 计算页码数组
pages() {
const pageArr = []
for (let i = 1; i <= this.pageCount; i++) {
pageArr.push(i)
}
return pageArr
}
},
mounted() {
// 计算总页数
this.pageCount = Math.ceil(this.dataList.length / this.pageSize)
},
methods: {
// 上一页
prevPage() {
this.currentPage--
this.startIndex = (this.currentPage - 1) * this.pageSize
},
// 下一页
nextPage() {
this.currentPage++
this.startIndex = (this.currentPage - 1) * this.pageSize
},
// 点击页码
changePage(page) {
this.currentPage = page
this.startIndex = (this.currentPage - 1) * this.pageSize
}
}
}
</script>
```
上面的代码中,我们首先定义了一个数据数组 dataList,里面存放了我们要展示的数据。然后定义了 pageSize、currentPage、startIndex、pageCount 等数据,用来记录每页显示数量、当前页码、当前页数据的起始下标和总页数等信息。
接着,在计算属性 displayData 中,我们根据 startIndex 和 pageSize 计算出当前页显示的数据。
在计算属性 pages 中,我们使用循环来生成页码数组。
在 mounted 钩子函数中,我们计算了总页数 pageCount。
最后,在 methods 中,我们定义了 prevPage、nextPage 和 changePage 三个方法,用来处理上一页、下一页和页码点击事件。在这些方法中,我们更新了 currentPage 和 startIndex,从而实现了前端分页的效果。
总的来说,使用Vue实现前端分页并不困难,只需要合理利用Vue的计算属性和方法即可。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)