Element Table 合並列

　<el-table

        :data="tableInfo.tableData"

        stripe

        height="calc(100% - 32px)"

        fit

         :span-method="objectSpanMethod"

        :cell-style="cellstyle"

        @sort-change="sortchange"

      >

　　<template v-for="(col,index) in tableInfo.columns">

　　　　<el-table-column

            :prop="col.prop"

            :key="index"

            align="center"

            :label="col.label"

            :width="col.width||100"

          ></el-table-column>

　　</template>

  </el-table>

 

private rowSpanArr: Array<Array<any>> = new Array<Array<any>>();

private dataArr: Array<Array<any>> = new Array<Array<any>>();

 

function getdate(){

　//后台獲取數據后為data

 

 // 獲取映射分類下的數組

 that.dataArr = that.toArray(data);

 that.getRowSpan();

}

 

 

 that.tableInfo.columns = [

      { label: "姓名", prop: "Name" },

      { label: "性別", prop: "Sex", width: 100 },

      { label: "年齡", prop: "Age", width: 100 },

 

    ];

toArray(arr: Array<any>) {
    let that = this;
    var arrs = new Array<Array<any>>();
    arr.forEach(function (v, i, arr) {
      var keys = Object.keys(v);
      arrs[i] = new Array();
      that.tableInfo.columns.forEach(function (v1: any, i1: any, arr1: any) {
        arrs[i].push(arr[i][v1.prop]); //用於把展示的數據給轉換成datatable類型，
      });
    });
    return arrs;
  }
  // 列合並數組數據（記錄每個單元格占用多少行，rowposition為當前計算行）
  getRowSpan() {
    let that = this;
    that.rowSpanArr = new Array<Array<number>>();
    let columns = that.dataArr[0].length || 0;
    //用於記錄每列的計算行
    let rowposition = Array(columns).fill(0);
    that.dataArr.forEach((item: any, row: number) => {
      //初始化每行每列
      that.rowSpanArr[row] = Array(columns).fill(1);
      if (row > 0) {
        //循環列
        let over = false;
        for (let column = 0; column < that.dataArr[row].length; column++) {
          if (that.dataArr[row][column] == that.dataArr[row - 1][column]) {
            if (over) {
              rowposition[column] = row;
            } else {
              that.rowSpanArr[rowposition[column]][column] += 1;
              that.rowSpanArr[row][column] = 0;
            }
          } else {
            rowposition[column] = row;
            over = true;
          }
        }
      }
    });
  }
  objectSpanMethod({ row, column, rowIndex, columnIndex }: any) {
    // 只合並區域位置
    let that = this;
    if (columnIndex === 0 || columnIndex === 1) {
      const _row = that.rowSpanArr[rowIndex][columnIndex];
      return {
        rowspan: _row, //行
        colspan: 1, //列
      };
    }
  }