踩了很多坑,总结了很多经验才决定写下来,不容易,请各位点点赞,评评论,谢谢。
前言:springboot的配置,看我之前的博客,vue.js是script引入的,分页采用的是sql分页(后端分页)。
分页实现思路:前端获取当前页和每页的数据大小两个值传到后台查询当前页的数据,返回数据数组给前端加载表格数据。
一、简单的表格代码(样式自己弄,代码我就不贴了)
<body>
<div id="td">
<br><br>
<table id="tb">
<thead>
<tr>
<th><input type="checkbox" @click="selectAll()" :checked="isAllSelected"></th>
<th>序号</th>
<th>账号</th>
<th>密码</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(person,index) in currentPageData" :key="index">
<td><input type="checkbox" @click="selectOne(person.id)" :checked="saveId.indexOf(person.id)>-1" value="person.id"></td>
<td>{
{(currentPage-1)*pageSize+index+1}}</td>
<td>{
{person.username}}</td>
<td>{
{person.password}}</td>
<td><input value="删除" type="submit" @click="deleteUser(person.id)"></td>
</tr>
</tbody>
</table>
<br><br>
<footer>
<input value="首页" type="submit" @click="firstPage()">
<input value="上一页" type="submit" @click="prevPage()">
<span>{
{current