[TOC]
使用element-ui分页,后端数据查询
前端页面
页面效果
代码实现
Vue前端
@Table(name = "t_order")
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Order {
private String oid;
@Column(name="create_time")
@JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8")
private Date createTime; //创建时间
@Column(name="total_price")
private Double totalPrice; //总价
private Integer status; //订单状态
private Integer uid; //用户表外键
}
<template>
<div>
<!-- 展示数据 -->
<el-table :data="pageInfo.list" border style="width: 100%">
<el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
<el-table-column prop="totalPrice" label="总价" width="180"></el-table-column>
<el-table-column prop="status" label="状态" width="180">
<template slot-scope="scope">
<el-tag v-if="scope.row.status == 0">未付款</el-tag>
<el-tag v-if="scope.row.status == 1" type="success">已付款</el-tag>
<el-tag v-if="scope.row.status == 2" type="info">已发货</el-tag>
<el-tag v-if="scope.row.status == 3" type="warning">已收货</el-tag>
<el-tag v-if="scope.row.status == 4" type="danger">结束</el-tag>
</template>
</el-table-column>
<el-table-column label="操作">
<template>
<el-button size="mini">Edit</el-button>
<el-button size="mini" type="danger">Delete</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页条 -->
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="params.pageNum"
:page-sizes="[2,4,6]"
:page-size="params.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageInfo.total"
></el-pagination>
</div>
</template>
<script>
import { myOrder } from "../api";
export default {
data() {
return {
uid: 1, //当前用户(模拟用户登录数据)
pageInfo: {}, //分页数据
params: {
pageNum: 1,
pageSize: 2
}
};
},
created() {
//页面加载发送ajax进行查询
this.findAll();
},
methods: {
async findAll() {
let { data: baseResult } = await myOrder(this.uid, this.params);
this.pageInfo = baseResult.data;
},
handleSizeChange(val) {
this.params.pageNum = 1;
this.params.pageSize = val;
this.findAll();
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
this.params.pageNum = val;
this.findAll();
console.log(`当前页: ${val}`);
}
}
};
</script>
<style>
</style>