Element-ui assembly using dynamic combination table row / column

　　　　Automatically merge dynamic implementation of table rows in a table / column: Articles Demand

　　　　UI framework and using libraries: Vue + Element-ui

　　　　Code Address: https://github.com/dreamITGirl/VueProgect

　　　　The final realization of tabular data

　　　　

　　Realization of ideas:

　　　　In the table assembly, it provided a property: span-method, which is a Function, itself has four parameters, namely row, rowIndex, colum, columIndex; get these four values ​​directly. Continuous process to the same column value, marked, then, in the combined process, the process according to our well array corresponding to the row or column merger

　　Implementation code:　

// method for processing table data, the consecutive identical data summary 
　　Merge () { 
      the let OrderObj = {}; 
      the let provinceObj = {};
       the this .tableData.forEach ((Element, index) => { 
        element.rowIndex = index;
         IF (OrderObj [element.operators]) { 
　　　　　　// If the data of the next data and the operators of the same column, the merge, on the contrary, are not merged; (which increases a determination purpose is to prevent the same occurrence interlaced, column The combined) 
          the let NextItem = the this .tableData [index +. 1 ] .operators
             ? the this .tableData [index +. 1 ] .operators 
            : undefined; 
          the 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);
          }
        } The else 
        }{ 
          ProvinceObj [element.province] = []; 
          provinceObj [element.province] .push (index); 
        } 
      }); 
      // The length of the array is greater than 1 to the value stored this.OrderIndexArr (i.e. to be merged items) 
      for (the let K in OrderObj) {
         IF (OrderObj [K] .length>. 1 ) {
           the this .OrderIndexArr.push (OrderObj [K]); 
        } 
      } 
      for (the let I in provinceObj) {
         IF (provinceObj [I] .length> . 1 ) {
           the 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 
                }; 
              } the else  IF (! J == 0 ) {
                 return { 
                  rowspan: 0 , 
                  colspan: 0 
                }; 
              } 
            } 
          } 
        } 
      } 
　　　　// demand because the first two columns are the same on the merger, it is necessary to judge them again a first column which rows need to merge;
       IF (columnIndex ===. 1 ) {
         for (the let J = 0; J < the this .provinceArr.length; J ++ ) { 
          the let Element = the 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
                };
              }
            }
          }
        }
      }
    }