1、
<el-pagination
background
layout="total, sizes, prev, pager, next, jumper"
:total="total" #总条数，需要后端传递过来
@size-change="handleSizeChange" # 选择一页显示多少条
@current-change="handleCurrentChange" # 选择第几页
:current-page.sync="currentPage" # .sync 要这么写，不然在点击第几页的时候一直在第一页，这是一个bug
:page-sizes="[5, 10, 20, 40]" #支持每页显示的条数
:page-size="pagesize" # 当前每页显示的默认条数
style="text-align: center; margin-top: 10px;">
</el-pagination>
2、目前两种办法是一次性获取到后端数据，前端做的分页，在每次点击下一页的时候就不会再和后端有交互了；还有一种随着数据量越来越大，一次性获取全部数据已经不合适
3、
# 选择每页显示几条数据
handleSizeChange: function (pagesize) {
this.pagesize = pagesize;
this.getGoods()
// console.log(this.pagesize) //每页下拉显示数据
},
# 选择第几页
handleCurrentChange: function(currentPage){
currentPage = this.currentPage
this.getGoods()
# 获取后端数据
getGoods: function(pagesize,currentPage) {
pagesize = this.pagesize
currentPage = this.currentPage
axios
.get("http://127.0.0.1:5000/getReg", {params: {pagesize,currentPage}})
.then((response) => {
this.shopGoods = response.data.data;
this.total = response.data.total; # 后端数据总条数传递
// console.log("接口返回数据:", this.shopGoods);
})
.catch((error) => {
console.log("错误原因:", error);
});
},
4、如果是一次性获取的后端数据，在搜索这里可以做成实时检索：
computed: {
tables() {
const input = this.input;
if (input) {
console.log("input输入的搜索内容：" + this.input);
return this.shopGoods.filter((data) => {
console.log("object:" + Object.keys(data));
return Object.keys(data).some((key) => {
return String(data[key]).toLowerCase().indexOf(input) > -1;
});
});
}
return this.shopGoods;
但是如果需要分页请求后端数据，这种就不适合了，但是这种是真的很舒服
5、后端flask通过paginate获取分页数据
最核心代码就这一条：
paginate = OrdeRegist.query.order_by(OrdeRegist.create_time.desc()).paginate(page, per_page, error_out=False)
返回数据把总条数加上：
return jsonify({'data':data_list,'total':total})
6、昨天遇到的一个bug
第一页数据正常渲染，但是第二页的数据后端返回了，但是前端怎么都渲染不出来，各种排查，最终找到了一个博客给了灵感
https://blog.csdn.net/Luckyzhoufangbing/article/details/95513662
但是按照他的方法也还是不行，因为他这个是特殊情况，因为他在搜索结果限定了只有一条，按照他的方法把currentpage设定为第一页，但是如果数据多的情况下，点击下一页就一直停留在第一页，根本不可取，其实最主要原因还是这一行代码：:data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
因为用的slice切片获取，他这个适合于实时检索，也就是一次性获取到了全部数据后适合这个切片，但是前后端分页交互获取数据这个方法就不可取了，总结：
实时检索：可用切片
非实时检索：直接获取数据返回，：data=“tables” 直接返回后端获取到的数据就可以解决了
