vue+element表格合并2

shuaijie0518

已于 2023-02-17 15:27:23 修改

阅读量179

点赞数

分类专栏： element 文章标签： elementui Powered by 金山文档

于 2023-02-13 18:22:49 首次发布

本文链接：https://blog.csdn.net/taoqidexiaojie/article/details/129014605

版权

element 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

该文章描述了一种处理表格中列合并的方法，特别是当第一列合并后，第二列需根据第一列的合并状态进行相应合并的情况。通过使用arraySpanMethod，作者遍历请求到的表格数据，计算需要合并的字段的出现次数，并存储在对象中。然后，根据这些信息创建两个数组arr1和arr2，用于记录合并的细节。这个过程涉及到对数据的深度处理和条件判断，以实现复杂的表格布局效果。

摘要由CSDN通过智能技术生成

需求：我们在写表格的时候，遇到过，第一列合并，合并完了之后，第二列要根据第一列合并的基础上再合并。这就跟我之前写的逻辑就有点不一样了。但是大体还是一样的。也是用到arraySpanMethod方法

在请求到表格数据，对数据进行循环，得到需要合并的字段

setDates(arr) {
  const obj = {};
  const obj2 = {};
  let k;
  let m;
  this.arr1 = []
  this.arr2 = []
  for (let i = 0, len = arr.length; i < len; i++) {
    //需要合并的字段
    m = arr[i].stationName;
    if(obj2[m]) obj2[m]++;
    else obj2[m] = 1;
  }
  //保存结果{el-'元素'，count-出现次数}
  let y = 0
  for (const o in obj2) {
    for (let i = 0; i < obj2[o]; i++) {
      if (i === 0) {
        this.arr2.push(obj2[o]);
      } else {
        this.arr2.push(0);
      }
    }
    let i = y
    y = obj2[o]+y
    for (i; (i < arr.length && i< y); i++) {
      //需要合并的字段
      k = arr[i].devType + o;
      if(obj[k]) obj[k]++;
      else obj[k] = 1;
    }
  }
  for(const o in obj) {
    for (let i = 0; i < obj[o]; i++) {
      if (i === 0) {
        this.arr1.push(obj[o]);
      } else {
        this.arr1.push(0);
      }
    }
  }

},