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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理