表格合并(vue3.0+TS+vantdesginVue)

简单表格合并通用方法
list:表格的数据
param:需要合并的字段
在这里插入图片描述
这里这么写

在这里插入图片描述
复杂的表格合并
在这里插入图片描述
这种情况的话这样写

// 合并:
export function mergeTable(items, param, nuxt?){
  const m = new Map();
  items.forEach((l) => {
    if (!m.has(l[param])) {
      const len = items.filter((f) => {
        return nuxt ? f[param] === l[param] && f[nuxt] === l[nuxt] : f[param] === l[param]
      }).length;
      m.set(l[param], len);
      l[`${param}Span`] = len
    } else {
      l[`${param}Span`] = 0;
    }
  })
  return items
}

拿到数据这样写:

  let data:any=[]
  // tableOlder 是封装得序号的方法 见下面
  data = tableOlder(
   res?.obj?.items,
     pages.page,
     pages.pageSize
   );
 tableData.value=mergeTable(data, 'teamNumber');
 tableProcessingData.value = mergeTable(data, 'target', 'teamNumber')
 pages.total = res?.obj?.itemTotal;
// 序号的方法
export default function tableOlder(data: any[] = [], page: number = 1, rows: number = 10) {
  data.forEach((item: any, index: number) => {
    // index 序号
    item.index = (page - 1) * rows + index + 1;
  })
  return data
}

这里继续这样写:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值