文章
问答
冒泡
Ant-design-vue表格合并单元格

业务场景:同一批次下面上不同的物料,但是批次和物料保存在一个表里面

后段返回的数据格式:

[
    {
        lotNumber: 123,
        materialNumber: 1
    },
    {
        lotNumber: 123,
        materialNumber: 2
    },
    {
        lotNumber: 1234,
        materialNumber: 1
    },
    {
        lotNumber: 1234,
        materialNumber: 2
    },
]

解决思路:

先把批次号单独拿出来,再找这个批次对应的物料数量作为合并行数

let lotNumbers = Array.from(new Set(this.loadData.map(item =>{ return item.materialSerialNo})))
lotNumbers.map(item => {
          let col = this.loadData.filter(itm => itm.materialSerialNo == item).length
          for(let i = 0; i < this.loadData.length; i++){
            if(this.loadData[i].materialSerialNo == item){
              this.loadData[i].col = col
              break
            }
            else{
              this.loadData[i].hasOwnProperty('col') ? '' : this.loadData[i].col = 0
            }
          }
  })

注意:如果是最后一行的话,就不往下走了,需要在columns中设置为0

{
          title: this.$t('modules.trace.batchNum'),
          dataIndex: 'materialSerialNo',
          width: 200,
          customRender: (value, row) => {
            const obj = {
              children: value,
              attrs: {}
            };
            obj.attrs.rowSpan = row.col || 0;
            return obj;
          }
  }

效果:

table

关于作者

小乙哥
学海无涯,回头是岸
获得点赞
文章被阅读