element.ui合并单元格

Posted 2022-04-18 health-zhang

循坏遍历出的表格

getSpanArr(data, index) 
  for (var i = 0; i < data.length; i++) 
    if (i === 0) 
      this.spanArr[index].push(1);
      this.pos[index] = 0
     else 
      // 判断当前元素与上一个元素是否相同,因合并第一个所以[0]
      if (data[i].lvSuppGoodsId === data[i - 1].lvSuppGoodsId) 
        this.spanArr[index][this.pos[index]] += 1;
        this.spanArr[index].push(0);
       else 
        this.spanArr[index].push(1);
        this.pos[index] = i;
      
    
  
,

objectSpanMethod( row, column, rowIndex, columnIndex ,index) 
  if (columnIndex <= 7 ) 
    const _row = this.spanArr[index][rowIndex];
    const _col = _row > 0 ? 1 : 0;
    return 
      rowspan: _row,
      colspan: _col
    
  
,

在数据请求时调用getSpanArr()

<el-table :data="item.children" border style="width: 100%" max-height="500" :span-method="a => return  objectSpanMethod(a,index)">

利用闭包传自定义参数


效果图：