使用框架实现表格展示和跳转功能，一直不懂原理。所以自己写一个简单的，加深理解。
布局分为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: {
// 获取页码数组，用于渲染点击跳转button
getPageNum() {
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>
