vue 实现简单表格分页功能

article/2025/9/18 3:45:35

使用框架实现表格展示和跳转功能，一直不懂原理。所以自己写一个简单的，加深理解。

布局分为2块，上面是表格展示数据，下面是点击按钮跳转。
效果图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>table {border-collapse: collapse;}table,th,td {border: 1px solid black;}.jump ul {display: flex;}.jump ul li {list-style: none;}</style></head><body><div id="app"><!-- 展现数据的表格 --><table><!-- 表头 --><tr><th>姓名</th><th>年龄</th><th>性别</th><th>操作</th></tr><!-- 每一行数据 --><tr v-for="(item,index) in currentList" :key="index"><td>{{item.name}}</td><td>{{item.age}}</td><td>{{item.gender}}</td><td><button>修改</button><button>删除</button></td></tr></table><!-- 点击跳转按钮部分 --><div class="jump"><ul><li><button @click="goto(1)">首页</button></li><li v-for="(item,index) in getPageNum()"><button @click="goto(item)">{{item}}</button></li><li><button @click="goto(totalPage)">尾页</button></li></ul></div></div></body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>new Vue({el: "#app",data: {// 总页数totalPage: 0,//   每页包含数据条数pageSize: 5,//   当前在第几页currentPage: 1,//   当前页面的数据currentList: [],//   表格的总体数据dataList: [{name: "stu1",age: 20,gender: "male",},{name: "stu2",age: 21,gender: "male",},{name: "stu3",age: 20,gender: "male",},{name: "stu4",age: 20,gender: "male",},{name: "stu1",age: 20,gender: "male",},{name: "stu2",age: 21,gender: "male",},{name: "stu3",age: 20,gender: "male",},{name: "stu4",age: 20,gender: "male",},{name: "stu1",age: 20,gender: "male",},{name: "stu2",age: 21,gender: "male",},{name: "stu3",age: 20,gender: "male",},{name: "stu4",age: 20,gender: "male",},],},created() {// 计算一共有多少页this.totalPage = Math.ceil(this.dataList.length / this.pageSize);this.getPageData(1);},methods: {// 获取页码数组，用于渲染点击跳转buttongetPageNum() {pageList = [];for (let index = 0; index < this.totalPage; index++) {pageList[index] = index + 1;}return pageList;},//   更新表格页面显示数据getPageData(index) {this.currentList = this.dataList.slice((index - 1) * this.pageSize,index * this.pageSize);},//   跳转到指定页面goto(index) {this.getPageData(index);},},});
</script>