乐趣区

Element表格合并

var mergeIndex = 0;
var hasMerge = false;
var mergeIndex1 = 0;
var hasMerge1 = false;
// 方法的全局变量
// 官网给我们提供了 span-method 的方法可以进行表格合并, 有 4 个参数返回:row,column,rowIndex,columnIndex;row 和 column 是表格的行和列, 里面是当前行和列的值, 也就是 tableData 里的值,rowIndex,columnIndex 是当前行和列的序号
arraySpanMethod({row, column, rowIndex, columnIndex}) {

    var that = this;
    var spanNum = this.spanNum;
    var spanNum1 = this.spanNum1;
    console.log("FFF",spanNum)
  //   合并第二列
    if (columnIndex === 1) {var num = spanNum1[row.fldSTName+'-'+row.fldRName];
      if (!hasMerge) {
        hasMerge = true;
        mergeIndex = rowIndex;
        if (num === 1) {hasMerge = false;}
        return [num, 1];//[10,1]
      } else {if (rowIndex === mergeIndex + num - 1) {hasMerge = false;}
        return [0, 0];
      }
    }
    // 合并第一列
    if (columnIndex == 0) {var num = spanNum[row.fldSTName];
      if (!hasMerge1) {
        hasMerge1 = true;
        mergeIndex1 = rowIndex;
        if (num === 1) {hasMerge1 = false;}
        return [num, 1];
         // 这里返回的是行和列的合并数量, 可以返回一个数组, 也可以返回一个对象, 效果一样
         // 这里 rowspan 为 num 是几行就有几行合并,colspan 为 1 列有 1 列合并, 你要合并几行几列就写上相应的数字
      } else {// 对合并后的
        if (rowIndex === mergeIndex1 + num - 1) {hasMerge1 = false;}
        return [0, 0];
       // 这里要写一个 else 的判断, 不然被合并列的原始数据会填充到合并之后的表格里
      // 这个判断是把合并的前几行值省略, 直接填原先最后行的值, 合并了几行, 就省略几行的值
      }
    }
}

上面是我封装的一个合并行的方法  合并列一样
用上面的方法首先需要处理一下数据 把需要合并的排列在一起,这里的 spanNum 的数据格式是  

arr 数组里面包含的是你合并行的唯一数据(有很多大同市但这里只会出现一次), 这里 row.fldSTName 是合并行的当前值。注意在合并第一行后需要合并第二行时需要判断要合并的第二行的第一行值是不是一样


在这里我的处理方式是 第二行的值加上第一行(row.fldSTName+’-‘+row.fldRName)


希望写的对大家有用 如果我写的没看明白的可以联系我 QQ1195392918

退出移动版