标签:queryInfo pagenum GetOrderList res 1111 total data
<template> <div> <el-card> <!-- 订单列表区域 --> <el-table :data="orderList" border style="width: 100%"> <el-table-column type="index" label="#" width="180"></el-table-column> <el-table-column prop="orader_number" label="订单编号" width="180"></el-table-column> <el-table-column prop="order_price" label="订单价格" width="180"></el-table-column> <el-table-column prop="pay_status" label="是否付款" width="180"> <template v-slot:default="scope"> <el-tag v-if="scope.row.pay_status === '1'" type="success">已付款</el-tag> <el-tag v-else type="danger">未付款</el-tag> </template> </el-table-column> <el-table-column prop="id_send" label="是否发货" width="180"></el-table-column> <el-table-column prop="create_time" label="下单时间" width="180"> <template v-slot:default="scope"> {{scope.row.create_time | dateFormat}} </template> </el-table-column> <el-table-column label="操作" width="180"> <el-button type="primary" icon="el-icon-edit" @click="addressVisible === true"></el-button> <el-button type="success" icon="el-icon-setting"></el-button> </el-table-column> </el-table> <!-- 分页区域 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="this.queryInfo.pagenum" :page-sizes="[5, 10, 15, 20]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> <!-- 修改地址弹窗区域 --> <el-dialog title="修改地址" :visible.sync="addressVisible" width="50%" @close="CloseAddress"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm"> <el-form-item> <el-cascader v-model="value" :options="options" :props="{ expandTrigger: 'hover' }" @change="handleChange"></el-cascader> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="addressVisible = false">取 消</el-button> <el-button type="primary" @click="PutAddress">确 定</el-button> </span> </el-dialog> </el-card> </div> </template> <script> export default { data(){ return{ queryInfo:{ query:'', pagenum:1, pagesize:5 }, total:0, orderList:[], addressVisible: false, } }, created(){ this.GetOrderList(); }, methods:{ // 获取订单列表 async GetOrderList(){ const {data: res} = await this.$http.get('order',{ params:this.queryInfo }); if(res.meta.status != 200){ return this.$message.error(res.meta.msg); } this.orderList = res.data.goods; this.queryInfo.pagenum = res.data.pagenum; this.data.total = res.data.total; }, // 分页页面数量时间 handleSizeChange(newPageSize){ this.queryInfo.pagesize = newPageSize; this.GetOrderList(); }, // 切换页面事件 handleCurrentChange(newPageNum){ this.queryInfo.pagenum = newPageNum; this.GetOrderList(); }, // 获取 // 提交修改地址信息 PutAddress(){}, // 关闭修改地址监听事件 CloseAddress(){
}, } } </script>
标签:queryInfo,pagenum,GetOrderList,res,1111,total,data 来源: https://www.cnblogs.com/MoonASixpence/p/14243522.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。