当前位置： 首页 > wzjs >正文

信息网站设计案例新手怎么做电商运营

wzjs 2025/8/21 10:30:59
信息网站设计案例,新手怎么做电商运营,蛋糕网站建设毕业论文,263企业邮箱自动回复背景： 笔者前端使用ant-design-vue,二次开发了a-table,但a-table组件的属性方法都可以用； 业务需求：物资存放在不同的仓库，显示物资统计表格，以物资分组合并显示物资名称、总数量（物资A在所有库房总数量&a…

背景：

笔者前端使用ant-design-vue,二次开发了a-table,但a-table组件的属性方法都可以用；
业务需求：物资存放在不同的仓库，显示物资统计表格，以物资分组合并显示物资名称、总数量（物资A在所有库房总数量），同时显示库房名称、地址、数量（物资A在库房1的数量）。

后端返回数据结构：

[{"sumQuantity": 100,"id": "IMilokafkwdIAmWmrlAjLX","version": 1,"materialId": "1","quantity": 0,"warehouseId": "IQotvqjOcr3IknflrjDta4","updateTime": "2025-02-28 13:15:00","materialName": "沙袋","warehouseName": "库房1","warehouseAddress": "物流运输产业院1栋101"},{"sumQuantity": 100,"id": "D0TpUNP3oF6J8DGFVBDX1v","version": 0,"materialId": "1","quantity": 100,"warehouseId": "IBU9sfUgWhcG0RglQB8urC","updateTime": "2025-02-28 10:51:51","materialName": "沙袋","warehouseName": "产业园3号4栋","warehouseAddress": "产业园3号4栋"},{"sumQuantity": 100,"id": "BRmOAec1CbeKTnnnmwefxF","version": 0,"materialId": "3","quantity": 100,"warehouseId": "IBU9sfUgWhcG0RglQB8urC","updateTime": "2025-02-28 10:51:51","materialName": "铁锹","warehouseName": "产业园3号4栋","warehouseAddress": "产业园3号4栋"},{"sumQuantity": 101,"id": "JGGKndrPSaVIlvDL8tG3Ea","version": 0,"materialId": "BtjEnxJslGMG3Ns3ZMtcVi","quantity": 100,"warehouseId": "IBU9sfUgWhcG0RglQB8urC","updateTime": "2025-02-28 10:51:51","materialName": "C","warehouseName": "产业园3号4栋","warehouseAddress": "产业园3号4栋"},{"sumQuantity": 101,"id": "F7GtvxU2hY8HqPHF90AMpn","version": 3,"materialId": "BtjEnxJslGMG3Ns3ZMtcVi","quantity": 1,"warehouseId": "IQotvqjOcr3IknflrjDta4","updateTime": "2025-02-28 13:15:00","materialName": "C","warehouseName": "库房1","warehouseAddress": "物流运输产业院1栋101"},{"sumQuantity": 104,"id": "FNgj4RPi1tiGzKebbr4rar","version": 2,"materialId": "E6Sdqv1JjR4HOzExdR2pi1","quantity": 4,"warehouseId": "IQotvqjOcr3IknflrjDta4","updateTime": "2025-02-28 13:15:00","materialName": "物资B","warehouseName": "库房1","warehouseAddress": "物流运输产业院1栋101"},{"sumQuantity": 104,"id": "KzS27athAsOGPLGviZk4OF","version": 0,"materialId": "E6Sdqv1JjR4HOzExdR2pi1","quantity": 100,"warehouseId": "IBU9sfUgWhcG0RglQB8urC","updateTime": "2025-02-28 10:51:51","materialName": "物资B","warehouseName": "产业园3号4栋","warehouseAddress": "产业园3号4栋"},{"sumQuantity": 104,"id": "KQ6z4WBmWmQJPvVQE9Px2G","version": 0,"materialId": "Ki7FlrYpS9UGpQcSyeZYap","quantity": 100,"warehouseId": "IBU9sfUgWhcG0RglQB8urC","updateTime": "2025-02-28 10:51:51","materialName": "E","warehouseName": "产业园3号4栋","warehouseAddress": "产业园3号4栋"},{"sumQuantity": 104,"id": "JM3W9JYTNYSItMBLxDOUBf","version": 1,"materialId": "Ki7FlrYpS9UGpQcSyeZYap","quantity": 4,"warehouseId": "IQotvqjOcr3IknflrjDta4","updateTime": "2025-02-28 08:44:18","materialName": "E","warehouseName": "库房1","warehouseAddress": "物流运输产业院1栋101"}
]

执行this.convertData(xxxData)后的数据结构为

[{"sumQuantity": 100,"id": "IMilokafkwdIAmWmrlAjLX","version": 1,"materialId": "1","quantity": 0,"warehouseId": "IQotvqjOcr3IknflrjDta4","updateTime": "2025-02-28 13:15:00","materialName": "沙袋","warehouseName": "库房1","warehouseAddress": "物流运输产业院1栋101","warehouseNameRowSpan": 1,"sumQuantityRowSpan": 2,"materialNameRowSpan": 2},{"sumQuantity": 100,"id": "D0TpUNP3oF6J8DGFVBDX1v","version": 0,"materialId": "1","quantity": 100,"warehouseId": "IBU9sfUgWhcG0RglQB8urC","updateTime": "2025-02-28 10:51:51","materialName": "沙袋","warehouseName": "产业园3号4栋","warehouseAddress": "产业园3号4栋","warehouseNameRowSpan": 1,"sumQuantityRowSpan": 0,"materialNameRowSpan": 0},{"sumQuantity": 100,"id": "BRmOAec1CbeKTnnnmwefxF","version": 0,"materialId": "3","quantity": 100,"warehouseId": "IBU9sfUgWhcG0RglQB8urC","updateTime": "2025-02-28 10:51:51","materialName": "铁锹","warehouseName": "产业园3号4栋","warehouseAddress": "产业园3号4栋","warehouseNameRowSpan": 1,"sumQuantityRowSpan": 1,"materialNameRowSpan": 1},{"sumQuantity": 101,"id": "JGGKndrPSaVIlvDL8tG3Ea","version": 0,"materialId": "BtjEnxJslGMG3Ns3ZMtcVi","quantity": 100,"warehouseId": "IBU9sfUgWhcG0RglQB8urC","updateTime": "2025-02-28 10:51:51","materialName": "C","warehouseName": "产业园3号4栋","warehouseAddress": "产业园3号4栋","warehouseNameRowSpan": 1,"sumQuantityRowSpan": 2,"materialNameRowSpan": 2},{"sumQuantity": 101,"id": "F7GtvxU2hY8HqPHF90AMpn","version": 3,"materialId": "BtjEnxJslGMG3Ns3ZMtcVi","quantity": 1,"warehouseId": "IQotvqjOcr3IknflrjDta4","updateTime": "2025-02-28 13:15:00","materialName": "C","warehouseName": "库房1","warehouseAddress": "物流运输产业院1栋101","warehouseNameRowSpan": 1,"sumQuantityRowSpan": 0,"materialNameRowSpan": 0},{"sumQuantity": 104,"id": "FNgj4RPi1tiGzKebbr4rar","version": 2,"materialId": "E6Sdqv1JjR4HOzExdR2pi1","quantity": 4,"warehouseId": "IQotvqjOcr3IknflrjDta4","updateTime": "2025-02-28 13:15:00","materialName": "物资B","warehouseName": "库房1","warehouseAddress": "物流运输产业院1栋101","warehouseNameRowSpan": 1,"sumQuantityRowSpan": 2,"materialNameRowSpan": 2},{"sumQuantity": 104,"id": "KzS27athAsOGPLGviZk4OF","version": 0,"materialId": "E6Sdqv1JjR4HOzExdR2pi1","quantity": 100,"warehouseId": "IBU9sfUgWhcG0RglQB8urC","updateTime": "2025-02-28 10:51:51","materialName": "物资B","warehouseName": "产业园3号4栋","warehouseAddress": "产业园3号4栋","warehouseNameRowSpan": 1,"sumQuantityRowSpan": 0,"materialNameRowSpan": 0},{"sumQuantity": 104,"id": "KQ6z4WBmWmQJPvVQE9Px2G","version": 0,"materialId": "Ki7FlrYpS9UGpQcSyeZYap","quantity": 100,"warehouseId": "IBU9sfUgWhcG0RglQB8urC","updateTime": "2025-02-28 10:51:51","materialName": "E","warehouseName": "产业园3号4栋","warehouseAddress": "产业园3号4栋","warehouseNameRowSpan": 1,"sumQuantityRowSpan": 2,"materialNameRowSpan": 2},{"sumQuantity": 104,"id": "JM3W9JYTNYSItMBLxDOUBf","version": 1,"materialId": "Ki7FlrYpS9UGpQcSyeZYap","quantity": 4,"warehouseId": "IQotvqjOcr3IknflrjDta4","updateTime": "2025-02-28 08:44:18","materialName": "E","warehouseName": "库房1","warehouseAddress": "物流运输产业院1栋101","warehouseNameRowSpan": 1,"sumQuantityRowSpan": 0,"materialNameRowSpan": 0}
]

前端部分代码

描述：1、计算每个字段（materialName）rowSpan [使用递归计算出的materialNameRowSpan存入行记录]
2、设置组件的columns,使用customRender 参见ant-design-vue文档中Column对象 使用的 API
注意：自定义需要合并字段数组，根据顺序合并字段值相同的行

methods部分函数如下

// 获取需要合并数据的rowSpanconvertData(arr, levelIndex = 0) {const levelKey = this.sortLevelconst key = levelKey[levelIndex]// 根据不同维度重新整合数据let groupObj = this.groupBy(arr, key) || {}Object.keys(groupObj).forEach((groupKey) => {if (levelIndex < levelKey.length - 1) {groupObj[groupKey] = this.convertData(groupObj[groupKey], levelIndex + 1)}// 计算rowSpangroupObj[groupKey].forEach((item, index, arr) => {item[`${key}RowSpan`] = index === 0 ? arr.length : 0})})return Object.values(groupObj).flat()},// 根据属性分组groupBy(arr = [], key) {let obj = {}arr.forEach((item) => {const val = item[key]if (!obj[val]) {obj[val] = []}obj[val].push(item)})return obj},

a-table组件columns设置如下

const materialNameRender = (value, row, index) => {return {children: value,attrs: {rowSpan: row.materialNameRowSpan,},}
}
const sumQuantityRender = (value, row, index) => {return {children: value,attrs: {rowSpan: row.sumQuantityRowSpan,},}
}
data(){
const tableColumns = [{title: "物资名称",align: "center",dataIndex: "materialName",key: "materialName",customRender: materialNameRender,},{title: "物资数量",align: "center",dataIndex: "sumQuantity",key: "sumQuantity",customRender: sumQuantityRender,},{title: "库房库位",children: [{title: "名称",dataIndex: "warehouseName",key: "warehouseName",align: "center",},{title: "地址",dataIndex: "warehouseAddress",key: "warehouseAddress",align: "center",},{title: "数量",align: "center",dataIndex: "quantity",key: "quantity",},],},{title: "更新时间",align: "center",dataIndex: "updateTime",key: "updateTime",},]return {tableColumns,sortLevel: ["materialName", "sumQuantity", "warehouseName"],}
}

示例效果

在这里插入图片描述

总结

纯前端实现清洗数据+表格合并 ，关键点在于前端数据结构，获取合并列的rowSpan，配合customRender，设置变量存储合并列字段顺序数组（sortLevel），能自定义实现字段值相同的则被合并行

http://www.dtcms.com/wzjs/414277.html

相关文章：

  • 网站建设公司主要如何建造自己的网站
  • .net开发的网站 能做成app吗媒体平台推广
  • 做网站后台要学希爱力副作用太强了
  • 西安网站制作厂家广告竞价
  • 做流量的网站应该注意什么网站收录申请
  • b2b免费信息网站app推广注册接单平台
  • 工作纪律心得体会seo零基础入门教程
  • 敬老院网站建设方案阿里云自助建站
  • 做网站全屏尺寸是多少钱网站空间费用一年多少
  • 建设网站的工作总结网站排名搜索
  • seo网站推广专员app广告推广
  • 阿里巴巴怎么做自己的免费网站电商是做什么的
  • 网站栏目类别是什么意思线上推广具体应该怎么做
  • 重庆市建设工程造价管理协会网站谷歌搜索入口手机版
  • 做网站 除了域名seo项目完整流程
  • 企业微网站怎样在百度上做免费推广
  • 临沂 网站建设付费推广外包
  • 企业如何做网站seo优化的网站
  • 花生壳软件做的网站个人怎么开跨境电商店铺
  • 太仓网站建设开鲁视频
  • 网站费做进什么科目互动营销经典案例
  • 需要找做网站的网络运营培训班多少钱
  • 宁波网站建设方案联系方式软件开发外包
  • 不干净的网站做性时事政治2023最新热点事件
  • 山西手机版建站系统开发百度打广告收费表
  • 网站建设基础流程seo优化服务是什么
  • 企业融资需求怎么写合肥网站优化平台
  • 苏州网站制作价格企业宣传推广方案
  • 广州帮人网站建设自助建站平台源码
  • 长沙百度推广公司宁波seo外包哪个品牌好