Element-UI + Vue,孙鑫Java视频教程百度网盘
}, },
}
[]( )分页功能的实现 ========================================================================== 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"`,然后 刷新页面;