Vue+Element 实现订单列表【管理端】02

效果图：

代码实现：

<template><div class="merchantOrderManage"><el-table :data="tableNewData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px" :cell-class-name="tableRowClassName" :header-cell-style="isCenter"><el-table-column prop="id" label="订单号" width="140" align="center" fixed> </el-table-column><el-table-column label="商品信息" width="350" fixed><template slot-scope="scope"><div class="info_box"><div class="info_box_img"><img :src="scope.row.img" alt="" /></div><div class="info_describe"><p class="text"><span>{{ scope.row.title }}</span></p><p class="attr"><span v-for="(itm, iid) in scope.row.goodsAttr" :key="iid"><span>{{ itm.attrName }}：{{ itm.attrValue }}</span></span></p></div></div></template></el-table-column><el-table-column prop="price" label="单价(元)" align="center" width="90"> </el-table-column><el-table-column prop="num" label="购买数量" align="center" width="80"> </el-table-column><el-table-column prop="total_payment" label="支付金额(元)" align="center" width="140"> </el-table-column><el-table-column prop="name" label="用户名称" align="center" width="110"> </el-table-column><el-table-column prop="phone" label="联系方式" align="center" width="115"> </el-table-column><el-table-column prop="address" label="用户地址" width="160"> </el-table-column><el-table-column prop="create_time" label="下单时间" align="center" width="160"></el-table-column><el-table-column label="订单状态" align="center" width="80"><template slot-scope="scope"><div class="tip-tag"><el-tag type="info" v-if="scope.row.status === 0">已取消</el-tag><el-tag v-if="scope.row.status === 1">待付款</el-tag><el-tag type="primary" v-if="scope.row.status === 2">待发货</el-tag><el-tag type="danger" v-if="scope.row.status == 3">待确认</el-tag><el-tag type="warning" v-if="scope.row.status == 4">退货</el-tag><el-tag type="success" v-if="scope.row.status == 5">退货邮寄</el-tag><el-tag type="success" v-if="scope.row.status == 5">退货完成</el-tag><el-tag type="success" v-if="scope.row.status == 5">已完成</el-tag></div></template></el-table-column><el-table-column label="操作" align="center" width="140" fixed="right"><template slot-scope="scope"><el-button type="text" @click="deleteForm(scope.row)" size="mini">详情</el-button><el-button type="text" @click="deleteForm(scope.row)" size="mini">发货</el-button></template></el-table-column></el-table><el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pagesize" layout="total, prev, pager, next, jumper" :total="total"> </el-pagination></div>
</template><script>
export default {name: 'merchantOrderManage',components: {},data() {return {tableNewData: [],hoverOrderArr: [],OrderIndexArr: [],tableData: [{id: '16117282260421',total_payment: 2999.0,name: '王某某',phone: '18523652142',address: '黑龙江省 大庆市 萨尔图区 富强街道 大街13号',create_time: '2021-01-27 14:17:06',status: 1,list: [{price: 999.0,num: 1,img: 'https://img-tmdetail.alicdn.com/bao/uploaded///img.alicdn.com/bao/uploaded/O1CN01JmWCdR1k3fd9AWtmD_!!0-item_pic.jpg_160x160q90.jpg',title: '华为mate40pro 5G手机 亮黑色 8+256G全网通（碎屏险套餐）',goodsAttr: [{attrName: '颜色',attrValue: '亮黑色'},{attrName: '运行内存',attrValue: '8GB'},{attrName: '机身存储',attrValue: '256GB'}]},{price: 1000,num: 2,img: 'https://img-tmdetail.alicdn.com/bao/uploaded///img.alicdn.com/bao/uploaded/O1CN01wfnm311k3fd483OAU_!!0-item_pic.jpg_160x160q90.jpg',title: '三星Galaxy Note20 Ultra 5G(SM-N9860)S Pen&三星笔记 120Hz自适应屏幕 5G手机游戏手机 12GB+256GB 初露白',goodsAttr: [{attrName: '选择颜色',attrValue: '亮黑色'},{attrName: '运行内存',attrValue: '8GB'},{attrName: '机身存储',attrValue: '512GB'}]}]},{id: '12987123',name: '里某某',total_payment: 100.0,phone: '18523652182',address: '海南省 三沙市 中沙群岛 中沙群岛 第一座岛屿',create_time: '2020-04-11',status: 2,list: [{price: 100.0,num: 1,img: 'https://img.alicdn.com/imgextra/i2/2502349528/O1CN010GNAOc2KFsLn58vTM_!!2502349528.png',title: '2020新款复古小个子温柔风衣中款150cm外套显高显瘦学生中长款秋',goodsAttr: [{attrName: '尺码',attrValue: 'S'},{attrName: '颜色',attrValue: '米色'}]}]}],total: 0,currentPage: 1, //初始页pagesize: 10 //每页的数据}},mounted() {this.getNewTableData()this.getOrderNumber()},methods: {// 初始页currentPagehandleCurrentChange: function(currentPage) {this.currentPage = currentPage},//表格内容居中显示isCenter({ row, column, rowIndex, columnIndex }) {return 'text-align:center'},// 获取相同编号的数组getOrderNumber() {let OrderObj = {}this.tableNewData.forEach((element, index) => {element.rowIndex = indexif (OrderObj[element.id]) {OrderObj[element.id].push(index)} else {OrderObj[element.id] = []OrderObj[element.id].push(index)}})// 将数组长度大于1的值 存储到this.OrderIndexArr（也就是需要合并的项）for (let k in OrderObj) {if (OrderObj[k].length > 1) {this.OrderIndexArr.push(OrderObj[k])}}console.log(this.OrderIndexArr, 'OrderIndexArr')},// 合并单元格objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0 || columnIndex === 4 || columnIndex === 5 || columnIndex === 6 || columnIndex === 7 || columnIndex === 8 || columnIndex === 9 || columnIndex === 10) {for (let i = 0; i < this.OrderIndexArr.length; i++) {let element = this.OrderIndexArr[i]for (let j = 0; j < element.length; j++) {let item = element[j]if (rowIndex == item) {if (j == 0) {return {rowspan: element.length,colspan: 1}} else if (j != 0) {return {rowspan: 0,colspan: 0}}}}}}},tableRowClassName({ row, rowIndex }) {let arr = this.hoverOrderArrfor (let i = 0; i < arr.length; i++) {if (rowIndex == arr[i]) {return 'hovered-row'}}},getNewTableData() {this.tableData.map((res) => {res.list.map((item) => {item.id = res.iditem.total_payment = res.total_paymentitem.create_time = res.create_timeitem.status = res.statusitem.name = res.nameitem.phone = res.phoneitem.address = res.address})this.tableNewData.push(res.list)})this.tableNewData = this.tableNewData.flat()}},created() {}
}
</script>
<style lang="scss" scoped>
.merchantOrderManage {background: #fff;width: 100%;left: 40px;right: 40px;padding: 20px;margin: 0 auto;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border-radius: 4px;.info_box {display: flex;align-items: center;margin: 0 10px;.info_box_img {cursor: pointer;width: 50px;flex: 0 0 50px;margin-right: 6px;img {width: 50px;height: 50px;}}.info_describe {.text {margin-bottom: 6px;}.attr {color: #9e9e9e;span {margin-right: 6px;}}}}
}.el-tag {width: 100%;height: 36px;line-height: 36px;
}
.tip-tag {.el-tag {text-align: center;}
}
</style>

Vue+Element 实现订单列表【管理端】02相关推荐

vue+element+echarts柱状图+列表
前端由vue+element搭建框架,引入vue和element的index.js和css就可以写页面: 页面和js可以echarts官网实例看下都是有的,主要看下如何动态赋值: 柱状图和列表: &l ...
icworks+D2Admin+vue+element UI 制作后台管理
前言: icworks又名飞冰海量可复用物料,通过 GUI 工具极速构建中后台应用.是阿里巴巴前端团队开源的一个产品,目的让前端开发简单而友好. 进入正题使用以及构建项目非常简单 1.直接进入官网 ...
Vue电商项目—订单管理—订单列表模块-10
Vue电商项目-订单管理-订单列表模块-10 1.1 订单管理概述订单管理模块用于维护商品的订单信息, 可以查看订单的商品信息.物流信息, 并且可以根据实际的运营情况对订单做适当的调整. 1.2 订 ...
element 订单列表中实现多个倒计时(vue+js)
实现场景:订单列表中多个倒计时(vue) <template><div class=""><div v-for="(item,index) ...
前端学习（2025）vue之电商管理系统电商系统之渲染订单列表数据
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（2024）vue之电商管理系统电商系统之根据分页获取订单列表数据
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
前端学习（2023）vue之电商管理系统电商系统之通过路由加载订单列表
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
Vue.js 3.0企业级管理后台开发实战：基于Element Plus UI
Vue.js 3.0企业级管理后台开发实战:基于Element Plus UI - 每天更新前言文章内容项目源码及课件第1章项目启动 1.1 项目原型 1.2 项目UI 1.3 项目开发流程 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...

Vue+Element 实现订单列表【管理端】02

Vue+Element 实现订单列表【管理端】02相关推荐

最新文章

热门文章