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;

}

}

前端页面：使用 [分页组件]( )；  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200702001446809.png)

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