iview table合并单元格

原创于 2022-04-11 15:07:27 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

vue 同时被 2 个专栏收录

20 篇文章

订阅专栏

iview

13 篇文章

订阅专栏

该博客主要讨论了一种用于处理表格数据的算法，通过遍历数据并计算每个单元格的可跨行数来实现单元格的合并。算法首先收集唯一的名称，然后为每个名称创建一个对象并初始化计数器，接着遍历数据更新计数器，最后根据计数器设置合并属性。此方法有助于优化表格布局，特别是在显示具有重复和合并需求的数据时。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

handleSpan({ row, column, rowIndex, columnIndex }){
  if (columnIndex === 0) {
    return {
      rowspan: row.mergeCol === 0 ? 0:row.mergeCol,
      colspan: row.mergeCol === 0 ? 0:1
    };
  }
},
//name 是你想要合并的字段名称
integratedData(data) {
  let arrId = [];
  data.forEach(i => {
    !arrId.includes(i.name) ? arrId.push(i.name) : arrId;
  });
  console.log(arrId)
  let arrObj = [];
  arrId.forEach(j => {
    arrObj.push({
      month: j,
      num: 0
    })
  })
  // 计算每个数据的可跨行数
  data.forEach(k => {
    arrObj.forEach(l => {
      k.name === l.month ? l.num ++ : l.num;
    })
  })
  data.forEach((m,mIndex) => {
    arrObj.forEach((n,index) => {
      if(m.name === n.month){
        if(arrId.includes(m.name)){
          m.mergeCol = n.num;
          arrId.splice(arrId.indexOf(m.name),1);
        }else{
          m.mergeCol = 0;
        }
      }
    })
  })
  console.log(arrId);
  this.table_data= data;
},