使用element-ui 組件動態合並table的行/列（第二次修改）

　　　　這是第二次修改，在通過調用后台接口返回來的時候，發現了代碼中的問題；現在將博客中錯誤的地方改過來，添加備注

              文章需求：動態實現table表格中行/列的自動合並

　　　　使用框架及UI類庫：Vue+Element-ui

　　　　代碼地址：https://github.com/dreamITGirl/VueProgect

　　　　最終實現的表格數據

　　　　

　　實現思路：

　　　　在table組件中，提供了一個屬性:span-method,它是一個Function，本身有4個參數，分別是row,rowIndex,colum,columIndex;這四個值可以直接拿到。先處理連續相同的列的值，做標記，然后，在合並的方法中，根據我們處理好的數組，去對應的合並行或列

　　實現代碼：　

//處理table數據的方法，將連續相同的數據匯總 
　　merge() {
      let OrderObj = {};
      let provinceObj = {};
      this.tableData.forEach((element, index) => {
        element.rowIndex = index;
        if (OrderObj[element.operators]) {
　　　　　　//如果下一個數據中的operators和這一列的數據相同，則合並，反之，不合並；（增加這一個判斷的目的是為了防止隔行出現相同時，列合並）；
　　　　　　//二次修改的地方，在nextItem中，index取不到當前值，因為這時候循環過來的index已經是+1之后的值了，所以，nextItem是不需要再+1的
          let nextItem = this.tableData[index + 1].operators
            ? this.tableData[index + 1].operators : undefined;
　　　　　　改為
　　　　　　let nextItem = this.tableData[idndex].operators ? this.tableData[index].operators : undefined

 　　　　　　let prevItem = this.tableData[index - 1].operators ? this.tableData[index - 1].operators : undefined; 
     　　　  if (element.operators == nextItem) { 
　　　　　　　　OrderObj[element.operators].push(index); 
　　　　　　　 } else if (element.operators == prevItem) { 
　　　　　　　　　　OrderObj[element.operators].push(index); } 
　　　　　　} else { 
　　　　　　　　OrderObj[element.operators] = []; 
　　　　　　　　OrderObj[element.operators].push(index);
　　　　　　 } 
　　　　  if (provinceObj[element.province]) { 
            let nextPro = this.tableData[index + 1] ? this.tableData[index + 1].province : undefined; 
　　　　　　　let prevPro = this.tableData[index - 1].province ? this.tableData[index - 1].province : undefined; 
            if (element.province == nextPro) { 
              provinceObj[element.province].push(index);
 　　　　　　 } else if (element.province == prevPro) { 
　　　　　　　　provinceObj[element.province].push(index); } 
　　　　　　　} else { 
 　　　　　　　　　　provinceObj[element.province] = []; 
　　　　　　　　　　if(index != 0){

　　　　　　　　　　　　provinceObj[element.province].push(index);

　　　　　　　　}
　　　　　　　　　　
　　　　　　 } 
　　}); // 將數組長度大於1的值 存儲到this.OrderIndexArr（也就是需要合並的項）
　　　　 for (let k in OrderObj) { if (OrderObj[k].length > 1) { this.OrderIndexArr.push(OrderObj[k]); } } for (let i in provinceObj) { if (provinceObj[i].length > 1) { this.provinceArr.push(provinceObj[i]); } }
}

//合並的方法
objectSpanMethod({ row, rowIndex, column, columnIndex }) {
      if (columnIndex === 0) {
        for (let i = 0; i < this.OrderIndexArr.length; i++) {
          let element = this.OrderIndexArr[i];
          for (let j = 0; j < element.length; j++) {
            let item = element[j];
            if (rowIndex === item) {
              if (j === 0) {
                return {
                  rowspan: element.length,
                  colspan: 1
                };
              } else if (j !== 0) {
                return {
                  rowspan: 0,
                  colspan: 0
                };
              }
            }
          }
        }
      }
　　　　//因為需求是前兩列中有相同的就合並，所以需要再次判斷出來第一列中哪些行需要合並；
      if (columnIndex === 1) {
        for (let j = 0; j < this.provinceArr.length; j++) {
          let element = this.provinceArr[j];
          for (let k = 0; k < element.length; k++) {
            let item = element[k];
            if (rowIndex === item) {
              if (k === 0) {
                return {
                  rowspan: element.length,
                  colspan: 1
                };
              } else if (k !== 0) {
                return {
                  rowspan: 0,
                  colspan: 0
                };
              }
            }
          }
        }
      }
    }
 

 =============================================

上面的代碼會導致一個問題，就是當上述數據中，當運營商是移動時，且也有省份和其他運營商的省份出現相同且連續時，即table的數據如下時，也就是移動中有和其他的省份出現相同且連續的時候，代碼算法就會出現問題。這時算出的出現廣州的數組位置index數組就是[0，1，2，8，9]，這樣的話，table的合並行就會出現錯誤。后面是修改后的代碼

tableData: [

{

operators: "其他",

province: "廣東",

room: "廣州雙線1",

abbreviation: "GZ_DB2",

bandwidth: "10G",

flow:

"第一條1G (no latest data,no latest data)第二條1G (no latest data,no latest data)"

},

{

operators: "其他",

province: "廣東",

room: "廣州雙線２",

abbreviation: "GZ_DB2",

bandwidth: "10G",

flow:

"第一條1G (no latest data,no latest data)第二條1G (no latest data,no latest data)"

},

{

operators: "其他",

province: "廣東",

room: "廣州雙線3",

abbreviation: "GZ_DB2",

bandwidth: "10G",

flow:

"第一條1G (no latest data,no latest data)第二條1G (no latest data,no latest data)"

},

{

operators: "電信",

province: "浙江",

room: "廣州雙線２",

abbreviation: "GZ_DB2",

bandwidth: "10G",

flow:

"第一條10G (no latest data,no latest data) 第二條10G (no latest data,no latest data)  第三條10G (no latest data,no latest data)  第四條10G"

},

{

operators: "電信",

province: "浙江",

room: "杭州雙線２",

abbreviation: "GZ_DB2",

bandwidth: "10G",

flow:

"第一條10G (no latest data,no latest data) 第二條10G (no latest data,no latest data)  第三條10G (no latest data,no latest data)  第四條10G"

},

{

operators: "電信",

province: "浙江",

room: "杭州雙線２",

abbreviation: "GZ_DB2",

bandwidth: "10G",

flow:

"第一條10G (no latest data,no latest data) 第二條10G (no latest data,no latest data)  第三條10G (no latest data,no latest data)  第四條10G"

},

{

operators: "聯通",

province: "江西",

room: "杭州雙線２",

abbreviation: "GZ_DB2",

bandwidth: "10G",

flow:

"第一條1G (no latest data,no latest data)第二條1G (no latest data,no latest data)"

},

{

operators: "聯通",

province: "浙江",

room: "浙江雙線２",

abbreviation: "GZ_DB2",

bandwidth: "10G",

flow:

"第一條10G (no latest data,no latest data) 第二條10G (no latest data,no latest data)  第三條10G (no latest data,no latest data)  第四條10G"

},

{

operators: "移動",

province: "江西",

room: "江西雙線２",

abbreviation: "GZ_DB2",

bandwidth: "10G",

flow:

"第一條1G (no latest data,no latest data)第二條1G (no latest data,no latest data)"

},

{

operators: "移動",

province: "廣東",

room: "廣州雙線２",

abbreviation: "GZ_DB2",

bandwidth: "10G",

flow:

"第一條1G (no latest data,no latest data)第二條1G (no latest data,no latest data)"

},

{

operators: "移動",

province: "廣東",

room: "廣州雙線２",

abbreviation: "GZ_DB2",

bandwidth: "10G",

flow:

"第一條1G (no latest data,no latest data)第二條1G (no latest data,no latest data)"

},

{

operators: "移動",

province: "廣東",

room: "廣州雙線２",

abbreviation: "GZ_DB2",

bandwidth: "10G",

flow:

"第一條1G (no latest data,no latest data)第二條1G (no latest data,no latest data)"

},

]

 merge() {
      let OrderObj = {};
      let provinceObj = {};
      this.tableData.forEach((element, index) => {
        element.rowIndex = index;
        if (OrderObj[element.operators]) {
          let nextItem = this.tableData[index + 1] //為防止報錯，先判斷this.tableData[index+1]項是否存在，否則js會報錯
            ? this.tableData[index + 1].operators
            : undefined;
          let prevItem = this.tableData[index - 1].operators
            ? this.tableData[index - 1].operators
            : undefined;
          if (element.operators == nextItem) {
            OrderObj[element.operators].push(index);
          } else if (element.operators == prevItem) {
            OrderObj[element.operators].push(index);
          }
        } else {
          OrderObj[element.operators] = [];
          OrderObj[element.operators].push(index);
        }
        
        if (provinceObj[element.province]) {
          let nextPro = this.tableData[index + 1]
            ? this.tableData[index + 1].province
            : undefined;
          let prevPro = this.tableData[index - 1].province
            ? this.tableData[index - 1].province
            : undefined;
          if (element.province == nextPro) {
            provinceObj[element.province].push(index);
          } else if (element.province == prevPro) {
            provinceObj[element.province].push(index);
          }
        } else {
         
          provinceObj[element.province] = [];
          provinceObj[element.province].push(index);
        }
      });
      
      // 將數組長度大於1的值 存儲到this.OrderIndexArr（也就是需要合並的項）
      for (let k in OrderObj) {
        if (OrderObj[k].length > 1) {
          this.OrderIndexArr.push(OrderObj[k]);
        }
      }
     //修改的地方
      for (let i in provinceObj) {
        if (provinceObj[i].length > 1) {
          this.handleData(provinceObj[i])
        }
      }
    },
//新增的方法，處理當數組的長度大於2的時候
    handleData(data){
      let temp = data;
      let itemArr = [];
      let itemArrNew = [];
      let resArr = [];
      if (data.length>2) {
          for (let i = 0; i < data.length; i++) {
              if (data[i+1]) {
                if (data[i+1] - data[i] > 1) {
                  itemArr = data.slice(0,i+1)
                  itemArrNew = temp.slice(i+1,temp.length)
                  break;
                }else{

　　　　　　　　　　　　resArr = data

　　　　　　　　　}
              }
          }
          if (itemArr.length>0 || itemArrNew.length>0) {
            this.provinceArr.push(itemArr)
            this.provinceArr.push(itemArrNew)
          }else{

　　　　　　　　this.provinceArr.push(data)

　　　　　　}
      }else{
        this.provinceArr.push(data)
      }
    },