最牛视频网站建设,旅游网站建设风险分析,个人中心页面模板,免费做抽奖的h5网站一、新建订单管理的分支二、创建一个订单管理的vue文件进行组件页面的路由配置import Order from ../components/order/Order.vue{path:/orders,component:Order},注意上面的components不要忘记少加一个s#xff01;三#xff0c;获取后台数据面包屑导航粘贴过来文本输入框../components/order/Order.vue {path:/orders,component:Order},注意上面的components不要忘记少加一个s三获取后台数据面包屑导航粘贴过来文本输入框添加一个卡片区域templatediv!-- 面包屑导航区 --el-breadcrumb separator-classel-icon-arrow-rightel-breadcrumb-item :to{ path: /home }首页/el-breadcrumb-itemel-breadcrumb-item订单管理/el-breadcrumb-itemel-breadcrumb-item订单列表/el-breadcrumb-item/el-breadcrumb!-- 卡片区域 --el-cardel-rowel-col :span8el-input placeholder请输入内容el-button slotappend iconel-icon-search/el-button/el-input/el-col/el-row/el-card/div
/templatescript
export default {data() {return {queryInfo: {query: ,pagenum: 1,pagesize: 10}}},created() {this.getOrderList()},methods: {async getOrderList() {const { data: res } await this.$http.get(orders, {params: this.queryInfo})if (res.meta.status ! 200) {return this.$message.error(获取订单列表失败)}console.log(res)}}
}
/scriptstyle langless scoped/style可以看到后台数据中有total总数据条数和goods 需要在代码中进行获取到动态的数据。新增orderlist 订单列表默认为空数组,存放goods在数据获取回来之后为这两个参数赋值 this.total res.data.totalthis.orderlist res.data.goods这样就获取到了订单列表数据四、订单数据渲染到页面中物流管理那块接口不能用了直接把信息粘贴过来就可以。
