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的数据格式是

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

clipboard.png
在这里个人处理方式是 第二行的值加上第一行(row.fldSTName+'-'+row.fldRName)spa

clipboard.png
但愿写的对你们有用 若是我写的没看明白的能够联系我QQ1195392918code

相关文章
相关标签/搜索