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

相關文章
相關標籤/搜索