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"`,然后 刷新页面;
				       
			          
