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

建设银行昆山分行网站wordpress本站导航在哪里

news 2025/10/29 13:45:16
建设银行昆山分行网站,wordpress本站导航在哪里,学做预算网站,临沂国际外贸网站建设背景： 笔者前端使用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/a/542059.html

相关文章：

  • 房地产网站建设策划书如何对网站进行维护
  • Lambert W 函数简要探讨
  • 为什么要避免使用 `SELECT *`？
  • 网站怎么做外链接中国建设银行e路护航网银安全组件
  • 网页设计网站名字做网站开发数据库怎么写
  • 创建es索引
  • Spring Boot项目中如何实现接口幂等
  • 深圳高端网站开发网上卖产品怎么推广
  • hexo框架做网站wordpress 变换模板
  • 国美在线网站建设淄博做网站推广
  • 网站提交网址网店美工实训报告总结2000字
  • 建设一个电子文学网站资金多少东莞建网站平台
  • 中山网站建设设计二级域名网站
  • 做营销型网站的公司建设工程规范发布网站
  • 网站策划是做什么的网站制作400哪家好
  • app网站开发培训自己的免费网站空间
  • 中国建设银行官方网站企业上海 政务网站建设情况
  • sqlmap注入
  • 自己的电脑怎么做网站装饰装修材料
  • Rust性能炼金术：如何用零成本抽象锻造系统级利器
  • 门户网站举例项目营销推广计划
  • EKF融合IMU的Cartographer SLAM建图
  • 当网络里混入“假网关”：用 Scapy 写一个 DHCP 欺骗检测器（附完整代码与讲解）
  • 网站开发设计费 怎么入账建设网站的知识
  • Windows：解决电脑开机解锁后黑屏但鼠标可见可移动的问题
  • 网站根目录验证文件域名注册免费平台
  • 基于PyTorch的YOLOv5目标检测模型训练脚本详解
  • FPGA设计实践之电子秒表设计（VHDL版——ISE14.7）
  • 江苏高校品牌专业建设工程网站wordpress 开发 表单
  • 郑州网站建设公司 排行关键词排名 收录 查询