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>