Vue和ElmentUI实现订单信息的分页操作
Posted SmallCuteMonkey
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue和ElmentUI实现订单信息的分页操作相关的知识，希望对你有一定的参考价值。
文章目录
1.引入相关的Vue.js和ElementUI的cdn
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="static/js/cookie_utils.js"></script>
<!-- element-ui需要引入vue.js -->
<script src="static/js/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="static/js/axios.min.js"></script>
<script src="static/js/utils.js"></script>
2.在Vue的data中用数组进行数据的相关的遍历
<script type="text/javascript">
var baseUrl="http://localhost:8080/";
var vm=new Vue({
el:"#app",
data:{
token:"",
username:"",
pageNum:1,
limit:6,
userId:"",
orders:[],
count:0,
status:null,
},
created(){
this.token=getCookieValue("token");
this.userId=getCookieValue("userId");
this.username=getCookieValue("username");
// 加载页面，请求订单信息
var url1=baseUrl+"order/list";
axios({
url:url1,
method:"get",
headers:{
token:this.token
},
params:{
userId:this.userId,
pageNum:this.pageNum,
limit:this.limit
}
}).then((res)=>{
console.log(res.data);
if(res.data.code==1){
this.orders=res.data.data.data;
console.log(this.orders);
this.count=res.data.data.count;
}
});
},
methods: {
// 通过订单状态进行查询
queryByStatus(status){
this.status=status;
console.log(this.status);
// 重新按照状态查询一次
// 加载页面，请求订单信息
var url1=baseUrl+"order/list";
axios({
url:url1,
method:"get",
headers:{
token:this.token
},
params:{
userId:this.userId,
pageNum:this.pageNum,
limit:this.limit,
status:this.status
}
}).then((res)=>{
console.log(res.data);
if(res.data.code==1){
this.orders=res.data.data.data;
console.log(this.orders);
this.count=res.data.data.count;
}
});
},
gotoComment:function(event){
var index=event.srcElement.dataset.index;
console.log(index);
var order=this.orders[index];
localStorage.setItem("order",JSON.stringify(order));
location.href="user-comment.html";
}
},
})
</script>
这个是elementUI的进行分页的代码
<td colspan="5">
<!-- 分页 -->
<el-pagination
background
layout="prev, pager, next"
:current-page="pageNum"
:page-size="limit"
:total="count" @current-change="pager">
</el-pagination>
</td>
3.可以使用template标签进行v-for的遍历
4.通过使用elmentUI的分页的相关代码直接实现分页的相关的功能
分页查询单独的分了出来，你可以加入methods中使用：
// 通过分页进行查询
pager(page){
this.pageNum=page;
//重新加载页面
// 加载页面，请求订单信息
// -------------分页查询按照状态进行查询
var obj={
userId:this.userId,
pageNum:this.pageNum,
limit:this.limit
};
if(this.status!=null){
obj.status=this.status;
}
// ------------
var url1=baseUrl+"order/list";
axios({
url:url1,
method:"get",
headers:{
token:this.token
},
params:obj
}).then((res)=>{
console.log(res.data);
if(res.data.code==1){
this.orders=res.data.data.data;
console.log(this.orders);
this.count=res.data.data.count;
}
});
},
<table class="table">
<tr>
<td>序号</td>
<td>订单商品</td>
<td>订单状态</td>
<td>时间</td>
<td>操作</td>
</tr>
<template v-for="order,index in this.orders">
<tr>
<td>{{index+1}}</td>
<td>{{order.untitled}}</td>
<td>
<span v-if="order.status=='1'">待付款</span>
<span v-else-if="order.status=='2'">待发货</span>
<span v-else-if="order.status=='3'">待收货</span>
<span v-else-if="order.status=='4'">待评价</span>
<span v-else-if="order.status=='5'">已完成</span>
<span v-else-if="order.status=='6'">已关闭</span>
</td>
<td>{{order.createTime}}</td>
<td>
<template v-if="order.status=='1'">
<button class="btn btn-success btn-xs">
去支付
</button >
<button class="btn btn-danger btn-xs">
取消订单
</button>
</template>
<template v-if="order.status=='2'">
<button class="btn btn-danger btn-xs">
取消订单
</button>
</template>
<template v-if="order.status=='3'">
<button class="btn btn-success btn-xs">
确认收货
</button >
</template>
<template v-if="order.status=='4'">
<button class="btn btn-success btn-xs" @click="gotoComment" :data-index="index">
去评价
</button >
</template>
<template v-if="order.status=='6'" || v-if="order.status=='5'" >
<button class="btn btn-danger btn-xs">
删除
</button >
</template>
</td>
</tr>
</template>
<tr>
<td colspan="5">
<!-- 分页 -->
<el-pagination
background
layout="prev, pager, next"
:current-page="pageNum"
:page-size="limit"
:total="count" @current-change="pager">
</el-pagination>
</td>
</tr>
</table>
以上是关于Vue和ElmentUI实现订单信息的分页操作的主要内容，如果未能解决你的问题，请参考以下文章