前端根据后端数据展示表格 处理数据 动态合并单元格

于 2022-05-23 10:48:28 发布 1169 收藏 7
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hy2356891299/article/details/124922158
版权

后端数据结构如下：

{
    "message":"获取成功",
    "code":200,
    "data":{
    "printer":"west",
    "printTime":"2022-05-22 19:16:23",
    "shortOrders":10,
    "shortSkus":6,
    "shortTotal":23,
    "raws":[
    [{
        "orders_id":3606,
        "product_nw_sku":"OD0634A",
        "pick_order_detail_sku_num":2,
        "total":0,
        "short_num":2,
        "location":[{"pi_lc_code":"ZAS0105A2","pi_stock_num":366}]
    },{
        "orders_id":3655,
        "product_nw_sku":"YM0396Z",
        "pick_order_detail_sku_num":2,
        "total":0,"short_num":2,
        "location":[{"pi_lc_code":"ZBL2608B04","pi_stock_num":96},         
                   {"pi_lc_code":"ZBL2614B02","pi_stock_num":40},    
                   {"pi_lc_code":"ZPMQ1312A01","pi_stock_num":291}]
    },{
        "orders_id":3669,
        "product_nw_sku":"YM0699Y",
        "pick_order_detail_sku_num":2,
        "total":0,
        "short_num":2,
        "location":[{"pi_lc_code":"ZAS0102A1","pi_stock_num":144},    
                   {"pi_lc_code":"ZBL0602B05","pi_stock_num":29}, 
                   {"pi_lc_code":"ZBL0813A01","pi_stock_num":22}, 
                   {"pi_lc_code":"ZBL0910B01","pi_stock_num":21}, 
                   {"pi_lc_code":"ZBL2615C03","pi_stock_num":19}, 
                   {"pi_lc_code":"ZBL2817B03","pi_stock_num":10}, 
                   {"pi_lc_code":"ZBL2903C02","pi_stock_num":22}, 
                   {"pi_lc_code":"ZBX1308A02","pi_stock_num":10}]
    },{
        "orders_id":3742,
        "product_nw_sku":"QJ0441B2",
        "pick_order_detail_sku_num":2,
        "total":0,
        "short_num":2,
        "location":[{"pi_lc_code":"ZBL1601B05","pi_stock_num":34},    
                   {"pi_lc_code":"ZPMQ1312B02","pi_stock_num":242}]
    },{
        "orders_id":3756,
        "product_nw_sku":"HCP588W2",
        "pick_order_detail_sku_num":3,
        "total":0,
        "short_num":3,
        "location":[{"pi_lc_code":"ZPMQ1205A01","pi_stock_num":39}]
    },{
        "orders_id":3856,
        "product_nw_sku":"OD0634A",
        "pick_order_detail_sku_num":2,
        "total":0,
        "short_num":2,
        "location":[{"pi_lc_code":"ZAS0105A2","pi_stock_num":366}]
    },{
        "orders_id":3870,
        "product_nw_sku":"YM0728B1",
        "pick_order_detail_sku_num":2,
        "total":0,
        "short_num":2,
        "location":[{"pi_lc_code":"ZAS0106A2","pi_stock_num":533},        
                   {"pi_lc_code":"ZBL0414A01","pi_stock_num":11}, 
                   {"pi_lc_code":"ZBL0515C03","pi_stock_num":5}, 
                   {"pi_lc_code":"ZBL2519B04","pi_stock_num":28}, 
                   {"pi_lc_code":"ZBX0501C01","pi_stock_num":10}, 
                   {"pi_lc_code":"ZBX0512B03","pi_stock_num":42}]
    },{
        "orders_id":3894,
        "product_nw_sku":"OD0634A",
        "pick_order_detail_sku_num":2,
        "total":0,
        "short_num":2,
        "location":[{"pi_lc_code":"ZAS0105A2","pi_stock_num":366}]
    },{
        "orders_id":3898,
        "product_nw_sku":"OD0634A",
        "pick_order_detail_sku_num":2,
        "total":0,
        "short_num":2,
        "location":[{"pi_lc_code":"ZAS0105A2","pi_stock_num":366}]
    },{
        "orders_id":3898,
        "product_nw_sku":"OD0634A",
        "pick_order_detail_sku_num":2,
        "total":0,
        "short_num":2,
        "location":[{"pi_lc_code":"ZAS0105A2","pi_stock_num":366}]}]]
    },
    "time":1653272183
}
<div>
    <div v-for="(item,index) in pageData" :key="index" style="width:204mm;margin:auto">
      <div style="margin-top: 20px;width:100%">
        <div style="display:flex;justify-content: space-between;">
          <div style="text-align:center">
            <img :src="`data:image/png;base64,${base64_content}`">
            <div>{{ pick_code }}</div>
          </div>
          <div>
            打印人 : {{ info.user }}&nbsp;&nbsp;&nbsp;&nbsp;
            打印时间 : {{ info.print_time }} <br>
            缺货订单 : {{ info.order_num }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            缺货SKU : {{ info.sku_num }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            缺货数量 : {{ info.total }}
          </div>
          <div style="font-weight: bold;">
            页数 {{ index+1 }}/{{ pageData.length }}
          </div>
        </div>
        <table border="1" cellspacing="0" cellpadding="5" style="margin: auto;width:100%">
          <tr style="height: 20px">
            <th>订单号</th>
            <th>牛蛙SKU</th>
            <th>仓位</th>
            <th>总库存</th>
            <th>缺货数量</th>
          </tr>
          <tr v-for="(sItem, sIndex) in item" :key="sIndex" style="height: 20px;text-align:center">
            <td v-if="sItem.orders_id" :rowspan="sItem.location.length">{{ sItem.orders_id }}</td>
            <td v-if="sItem.product_nw_sku" :rowspan="sItem.location.length">{{ sItem.product_nw_sku }}</td>
            <td>{{ sItem.location[0].pi_lc_code }}</td>
            <td>{{ sItem.location[0].pi_stock_num }}</td>
            <td v-if="sItem.short_num" :rowspan="sItem.location.length">{{ sItem.short_num }}</td>
          </tr>
        </table>
      </div>
      <div v-if="index!==pageData.length-1" style="page-break-after:always; height:0px;">&nbsp;</div>
    </div>
  </div>

 后端给的数据我们需要处理一下，当需要合并单元格时，需要知道需要合并多少行，并且现在后端数据是有一对多的结构，需要将多个仓位拆分一条一条插入到外层，且需要注意需要合并单元格的第一条数据以外字段不能展示td，插入时应只插入非合并的字段，这样遍历时才不会导致多出td标签导致单元格错位多出问题。

数据处理如下：

import { barcode } from '@/api/common'
import { pickCodeStock } from '@/api/storeManagement'
export default {
  data() {
    return {
      pick_code: '', // 拣货单号
      info: '', // 基本数据
      pageData: [],
      base64_content: '' // 条码
    }
  },
  mounted() {
    this.pick_code = this.$route.query.pick_order_code
    this.getData()
  },
  methods: {
    async getData() {
      await barcode({ barcode: this.pick_code }).then(res => {
        this.base64_content = res.data.base64_content
      })
      // 获取缺货单数据
      pickCodeStock({ pick_code: this.pick_code }).then(res => {
        this.info = {
          user: res.data.printer,
          print_time: res.data.printTime,
          order_num: res.data.shortOrders,
          sku_num: res.data.shortSkus,
          total: res.data.shortTotal
        }
        if (res.data.raws && res.data.raws.length) {
          this.pageData = this.dealData(res.data.raws || [])
        } else {
          this.$message.error('暂无缺货数据！')
        }
      })
    },
    // 处理表格数据为了合并单元格
    dealData(data) {
      for (let i = 0; i < data.length; i++) {
        for (let j = 0; j < data[i].length; j++) {
          const item2 = data[i][j]
          const location = item2.location
          const a = []
          if (location.length > 1) {
            for (let k = 1; k < location.length; k++) {
              const item3 = location[k]
              const arr = []
              arr.push(item3)
              const obj = {
                location: arr
              }
              a.push(obj)
            }
          }
          data[i].splice(j + 1, 0, ...a)
          j = j + a.length
        }
      }
      return data
    }
  }
}

处理后的数据如下：

[
    [{
        "orders_id":3606,
        "product_nw_sku":"OD0634A",
        "pick_order_detail_sku_num":2,
        "total":0,
        "short_num":2,
        "location":[{"pi_lc_code":"ZAS0105A2","pi_stock_num":366}]
    },{
        "orders_id":3655,
        "product_nw_sku":"YM0396Z",
        "pick_order_detail_sku_num":2,
        "total":0,
        "short_num":2,
        "location":[{"pi_lc_code":"ZBL2608B04","pi_stock_num":96},            
                   {"pi_lc_code":"ZBL2614B02","pi_stock_num":40}, 
                   {"pi_lc_code":"ZPMQ1312A01","pi_stock_num":291}]
    },{
        "location":[{"pi_lc_code":"ZBL2614B02","pi_stock_num":40}]
    },{
        "location":[{"pi_lc_code":"ZPMQ1312A01","pi_stock_num":291}]
    },{
        "orders_id":3669,
        "product_nw_sku":"YM0699Y",
        "pick_order_detail_sku_num":2,
        "total":0,
        "short_num":2,
        "location":[{"pi_lc_code":"ZAS0102A1","pi_stock_num":144},                                                    
                   {"pi_lc_code":"ZBL0602B05","pi_stock_num":29}, 
                   {"pi_lc_code":"ZBL0813A01","pi_stock_num":22}, 
                   {"pi_lc_code":"ZBL0910B01","pi_stock_num":21}, 
                   {"pi_lc_code":"ZBL2615C03","pi_stock_num":19}, 
                   {"pi_lc_code":"ZBL2817B03","pi_stock_num":10}, 
                   {"pi_lc_code":"ZBL2903C02","pi_stock_num":22}, 
                   {"pi_lc_code":"ZBX1308A02","pi_stock_num":10}]
    },{
        "location":[{"pi_lc_code":"ZBL0602B05","pi_stock_num":29}]
    },{
        "location":[{"pi_lc_code":"ZBL0813A01","pi_stock_num":22}]
    },{
        "location":[{"pi_lc_code":"ZBL0910B01","pi_stock_num":21}]
    },{
        "location":[{"pi_lc_code":"ZBL2615C03","pi_stock_num":19}]
    },{
        "location":[{"pi_lc_code":"ZBL2817B03","pi_stock_num":10}]
    },{
        "location":[{"pi_lc_code":"ZBL2903C02","pi_stock_num":22}]
    },{
        "location":[{"pi_lc_code":"ZBX1308A02","pi_stock_num":10}]
    },{
        "orders_id":3742,
        "product_nw_sku":"QJ0441B2",
        "pick_order_detail_sku_num":2,
        "total":0,
        "short_num":2,
        "location":[{"pi_lc_code":"ZBL1601B05","pi_stock_num":34},    
                   {"pi_lc_code":"ZPMQ1312B02","pi_stock_num":242}]
    },{
        "location":[{"pi_lc_code":"ZPMQ1312B02","pi_stock_num":242}]
    },{
        "orders_id":3756,
        "product_nw_sku":"HCP588W2",
        "pick_order_detail_sku_num":3,
        "total":0,
        "short_num":3,
        "location":[{"pi_lc_code":"ZPMQ1205A01","pi_stock_num":39}]
    },{
        "orders_id":3856,
        "product_nw_sku":"OD0634A",
        "pick_order_detail_sku_num":2,
        "total":0,
        "short_num":2,
        "location":[{"pi_lc_code":"ZAS0105A2","pi_stock_num":366}]
    },{
        "orders_id":3870,
        "product_nw_sku":"YM0728B1",
        "pick_order_detail_sku_num":2,
        "total":0,
        "short_num":2,
        "location":[{"pi_lc_code":"ZAS0106A2","pi_stock_num":533}, 
                   {"pi_lc_code":"ZBL0414A01","pi_stock_num":11}, 
                   {"pi_lc_code":"ZBL0515C03","pi_stock_num":5}, 
                   {"pi_lc_code":"ZBL2519B04","pi_stock_num":28}, 
                   {"pi_lc_code":"ZBX0501C01","pi_stock_num":10}, 
                   {"pi_lc_code":"ZBX0512B03","pi_stock_num":42}]
    },{
        "location":[{"pi_lc_code":"ZBL0414A01","pi_stock_num":11}]
    },{
        "location":[{"pi_lc_code":"ZBL0515C03","pi_stock_num":5}]
    },{
        "location":[{"pi_lc_code":"ZBL2519B04","pi_stock_num":28}]
    },{
        "location":[{"pi_lc_code":"ZBX0501C01","pi_stock_num":10}]
    },{
        "location":[{"pi_lc_code":"ZBX0512B03","pi_stock_num":42}]
    },{
        "orders_id":3894,
        "product_nw_sku":"OD0634A",
        "pick_order_detail_sku_num":2,
        "total":0,
        "short_num":2,
        "location":[{"pi_lc_code":"ZAS0105A2","pi_stock_num":366}]
    },{
        "orders_id":3898,
        "product_nw_sku":"OD0634A",
        "pick_order_detail_sku_num":2,
        "total":0,
        "short_num":2,
        "location":[{"pi_lc_code":"ZAS0105A2","pi_stock_num":366}]
    },{
        "orders_id":3898,
        "product_nw_sku":"OD0634A",
        "pick_order_detail_sku_num":2,
        "total":0,
        "short_num":2,
        "location":[{"pi_lc_code":"ZAS0105A2","pi_stock_num":366}]
    }]
]

展示效果如下：

 右键打印适应A4纸张如下：

 

hy2356891299
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
html前端动态获取后端数据显示到表格，实现分页显示
04-14
html前端获取后端js的数据，实现到html表格，并且实现表格分页显示，分页显示原理是要显示那一页数据就从后端获取需要显示页的数据，不会一次性获取全部数据，减小流前端的压力。后端使用js+express，读取csv文件存储到内存，前端需要那一段的数据，后端就给前端那一页的数据。非常适合前端新手。同时分为两个文件serverImage和clientImage，其中包含项目源码,一些配置文件，以及后端需要处理的两个csv文件，同时包含生成docker镜像的Dockerfile，可直接在serverImage和clientImage目录先直接build客户端镜像和服务端镜像。
纯前端js(或者vue)导出excel实现：合并单元格、设置单元格样式、单元格内换行
热门推荐
qq_42688511的博客
01-28 1万+
纯前端实现js导出excel可以设置导出的excel的样式 合并单元格，单元格内自动换行，添加边框和设置字体的样式和颜色
使用 objectSpanMethod 实现动态el-table合并行、合并列功能
Y_seaboy的博客
04-25 87
colspan = y, 当前行往下合并x行，当前列往右合并y列。colspan = 1, 当前单元格正常显示。colspan = 0, 当前单元格不显示。
前端小计（setTimeout实现淡入淡出）——百度学院第二十到第二十一天：让你和页面对话
qq_45358338的博客
08-10 205
自己亲手做的，很基础吧！虽然很乱的样子，没办法，技术有限，只能做到这一步了。 贴上代码：` Document 淡出 ` 在写的过程中，我发现了一个问题，没错。他就是精度的问题。在不透明度（opacity）0~1之间的淡入淡出过程中，我发现无法做到精确计算，所以只能这样做了。 ...
JavaScript动态合并table单元格
lyqin2008的专栏
08-28 1542
动态合并的js代码如下： window.onload = function(){ var table=document.getElementById("table1"); var rows=table.rows; var dwryxj=dwgbxj=""; var count=1; for(var i=1;i1){//合并 var start=i-count; //alert(start); rows[start].cells[4].rowSpan=
前端小计（setInterval实现淡入淡出2）——百度学院第二十到第二十一天：让你和页面对话
qq_45358338的博客
08-10 102
这是用setInterval来实现的淡入淡出，感觉和上一篇没啥区别，2333。看看setTimeout实现淡入淡出 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> &...
前端表格合并单元格技巧
qq_42026600的博客
03-30 293
前端表格合并单元格技巧
table表格中单元格的合并
greentrainsad的博客
11-01 8636
表格中单元格的合并
vue + Element Ui 中生成动态合并表格及后端数据说明及常见问题
weixin_53411280的博客
02-10 527
vue + Element Ui 中生成动态合并表格及后端数据说明及常见问题
前端表格展示后端数据（vue+element）
DYHLHW的博客
12-27 6206
一、总体思路 根据请求回来的数据， 1.将表格具体的列和数据关联，从里面找到要放在表格里的信息 2.把找到的数据赋值给表格 具体实现 1.前端设计好表格，包括列名，绑定数据等,具体见下图 先在data（）{}里声明动态绑定的数组 datalist:[]， 然后写表格结构 2.查看一下网络请求返回来的数据，把值放在datalist里 先看返回数据情况，如果返回数据的结构是 data数组->直接是表格绑定的数据 这样就可以直接赋值，因为response.data拿到返回数据的值。 response.d
前端 | 表格（table）的合并
weixin_43627723的博客
01-14 4426
开始系统学习前端啦~ 记录一下自己在学习时不够熟悉的一些点儿 表格的行/列合并 跨行合并合并的都是合并行，不跨行合并的都是和并列 不管是合并行还是和并列，合并的属性都给列td（th）设置 表格的合并不是合二为一，而是一个人占多个人的位置，把其他的内容挤出去 合并行 rowspan 和并列 colspan 举个小栗子！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> .
table表格按列合并相同数据行单元格代码
07-13
在jsp、html页面中实现table表格按列合并相同数据行单元格代码，可实现功能为：在一个table表格中，合并指定列中所有相同数据相邻行单元格内容。
JAVAeasypoi根据Excel模板导出 循环遍历合并单元格处理
03-31
【JAVA】easypoi根据Excel模板导出 循环遍历合并单元格处理
vue通过数据过滤实现表格合并
01-19
基于vue通过数据过滤实现表格合并，供大家参考，具体内容如下 需求 基于vue渲染的数据表格 需要对相同的列进行合并 思路 自从使用了vue，就再也不想直接操作dom节点了，所以还是对数据操作。 要合并单元格需要用到...
Layui数据表格之单元格编辑方式
10-16
今天小编就为大家分享一篇Layui数据表格之单元格编辑方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
jquery 动态合并单元格的实现方法
11-22
////table中指定行第N列合并单元格(合并后会多出一列，删除N+1单元格即可) var tds = $("#dgList .TableHeader1").find('td'); tds[6].setAttribute("colSpan", "2"); 还可以写成：tds[6].attr("rowSpan", 2);
前端：JS中表格合并单元格（列）
weixin_41036393的博客
11-11 2061
/** * 列合并单元格(如果结束行传0代表合并所有行) * @param table 表格的ID * @param startRow 起始行 * @param endRow 结束行 * @param col 合并的列号，对第几列进行合并(从0开始)。第一行从0开始 */ function mergeCell(table, startRow, endRow, col) { var tb = document.getElementById(table); .
WEB前端学习-合并单元格
qq_45960709的博客
06-26 3544
一、合并单元格有两种方式 跨行合并：rowspan="合并单元格的个数" 跨列合并：colspan="合并单元格的个数" 二、合并单元格顺序 和学习汉字的书写顺序完全一致：先上 后下 先左 后右 三、合并单元格三部曲 1.先确定是跨行还是跨列合并 2.根据先上后下 先左 后右的原则找到目标单元格，然后写上合并方式还有要合并的数量比如：<td colspan="3"></td> 3.删除多余单元格 ...
JS代码实现：修改价格表中单价，自动修改小计和总计
kuaixiao0217的博客
04-21 977
JS代码实现单价表中修改单价，从而自动修改小计和总计
easyexcel导入合并单元格数据
最新发布
05-09
在使用EasyExcel导入数据的过程中，遇到合并单元格的情况时，需要注意处理合并单元格的数据。首先，需要通过读取Excel的元数据信息来获取合并单元格的信息。在EasyExcel中，可以使用SheetExtra方法获取Sheet对象中合并单元格的信息。 获取Sheet对象中合并单元格的信息之后，需要对数据进行处理。如果要获取合并单元格的数据，则需要使用合并单元格的起始单元格的值。由于合并单元格的值只存储在起始单元格中，因此读取数据时需要从起始单元格中获取该合并单元格的值。 对于需要使用合并单元格的数据进行计算的情况，需要注意合并单元格的影响。由于合并单元格的值只存储在起始单元格中，因此如果直接使用原始数据源进行计算，容易出现计算错误的情况。为了避免这种情况的发生，需要在读取数据之后，特别处理合并单元格的数据。这种处理方式包括：扩展合并单元格，复制合并单元格的数据到其他单元格。 扩展合并单元格可以使用Java语言中的数组或集合操作实现。复制合并单元格的数据可以使用EasyExcel提供的方法实现。例如，使用SheetExtra对象提供的方法copyMergeValue()方法即可实现合并单元格的复制操作。 综上所述，EasyExcel导入合并单元格数据需要注意以下几点： 1. 读取Excel的元数据信息，获取合并单元格的信息。 2. 对于需要使用合并单元格的数据进行计算的情况，需要特别处理合并单元格的数据。 3. 实现合并单元格的复制操作，可以使用EasyExcel提供的方法copyMergeValue()方法实现。 通过以上步骤，可以实现EasyExcel导入合并单元格数据的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hy2356891299

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值