大家好，又见面了，我是你们的朋友全栈君。
},
},
}
[]( )分页功能的实现
==========================================================================
mysql 分页查询：
SELECT id, name, bir, sex, address
FROM t_user
LIMIT #{start}, #{rows}
后端控制器：
@RestController
@RequestMapping(“/user”)
@CrossOrigin
public class UserController {
@Autowired
private UserService userService;
// 分页查询
@GetMapping("/findByPage")
public Map<String, Object> findByPage(Integer pageNow, Integer pageSize) {
Map<String, Object> result = new HashMap<>();
pageNow = pageNow == null ? 1 : pageNow; // 不传当前页数默认为1
pageSize = pageSize == null ? 4 : pageSize; // 不传当前页面显示条数默认显示4条
List<User> users = userService.findByPage(pageNow, pageSize); // 分页查询
Long totals = userService.findTotals();
result.put("users", users);
result.put("total", totals);
return result;
}
}
前端页面：使用 [分页组件]( )；
<div>
<!-- 分页组件 -->
<el-pagination style="margin: 15px 0px;"
prev-text="上一页" next-text="下一页" background
layout="prev, pager, next, sizes, jumper, total"
:page-sizes="[2,4,6,8,10]"
:page-size="pageSize"
:total="total"
:current-page="pageNow"
@current-change="findPage"
@size-change="findSize">
</el-pagination>
</div>
<script> export default {
data() {
return {
total: 0, // 总页数, 从后台查询获取
pageNow: 1, // 当前页数, 默认为1
pageSize: 4 // 当前页显示的数据条数, 默认为4
}
},
methods: {
findPage(page) { // 用来处理分页相关方法
console.log("当前页数: " + page);
this.pageNow = page;
this.findAllTableDataByPage();
},
findSize(size) { // 用来处理每页显示记录发生变化的方法
console.log("当前页面记录条数: " + size);
this.pageSize = size;
this.findAllTableDataByPage();
},
findAllTableDataByPage() {
this.$http.get("http://localhost:8989/user/findByPage?pageNow=" + this.pageNow + "&pageSize=" + this.pageSize).then((res) => {
// console.log(res.data);
this.tableData = res.data.users;
this.total = res.data.total;
});
}
},
created() {
this.findAllTableDataByPage();
}
} </script>
```
[]( )el-date-picke 日期少一天
======================================================================================
Element-UI 中时间控件的默认时间为 **国际标准时间**，因此与北京时间差 8 个小时。
解决方案：在标签中增加属性 `value-format="yyyy-MM-dd"`，然后 刷新页面；
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/145367.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
