elementUI表格內容的行列合並

說明：本篇采用2.12版本，在官方文檔上面分別提供了行或列的合並，整合起來后根據個人或項目不同的需求，整合起來的合並效果會不相同，這里只進行舉例。

文末說明示例弊端和本篇示例可調控范圍

<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%">
      <el-table-column
        prop="addr"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="nameA"
        label="別名">
      </el-table-column>
      <el-table-column
        prop="amount1"
        label="數值 1">
      </el-table-column>
      <el-table-column
        prop="amount2"
        label="數值 2">
      </el-table-column>
      <el-table-column
        prop="amount3"
        label="數值 3">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "newTbTest",
    data() {
      return {
        tableData: [{
          addr: '成都',
          name: '王小虎1',
          nameA: '王小虎1',
          amount1: '234',
          amount2: '3.2',
          amount3: 10,
          id: '12987122'
        }, {
          addr: '成都',
          name: '王小虎2',
          nameA: '王小虎2',
          amount1: '165',
          amount2: '4.43',
          amount3: 12,
          id: '12987122'
        }, {
          addr: '長沙',
          name: '王小虎3',
          nameA: '王小虎3',
          amount1: '324',
          amount2: '1.9',
          amount3: 9,
          id: '12987122'
        }, {
          addr: '長沙',
          name: '王小虎4',
          nameA: '王小虎5',
          amount1: '621',
          amount2: '2.2',
          amount3: 17,
          id: '12987122'
        }, {
          addr: '長沙',
          name: '王小虎4',
          nameA: '王小虎6',
          amount1: '539',
          amount2: '4.1',
          amount3: 15,
          id: '12987122'
        }]
      };
    },
    methods: {
      // ele自定義方案
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        // 合並行列產品名字相同合並（計算組長度以內的列，需要進行合並操作的列）
        let mergeLength = 3;//需要進行橫縱合並的列
        if (columnIndex < mergeLength) {
          let finArray = [1,1];
          // 處理行數據
          let cgname = Object.keys(row)[columnIndex]
          if(rowIndex === 0 || row[cgname] !== this.tableData[rowIndex-1][cgname]){
            let rowspan = 1;
            //計算需要進行合並操作的行
            for(let i=0; i<this.tableData.length-1; i++){
              // 只合並連續的
              if(this.tableData[i][cgname] === row[cgname] && this.tableData[i+1][cgname] === row[cgname]){
                rowspan ++;
              }
            }
            finArray[0] = rowspan;
          }else {
            finArray[0] = 0;
          }

          // 處理列數據
          let colkeys = Object.keys(row);
          let cgvalue = Object.values(row)[columnIndex]
          if(columnIndex ===0 || row[colkeys[columnIndex-1]] !== row[colkeys[columnIndex]]){
            let colspan = 1;
            //計算需要進行合並操作的列
            for(let i=columnIndex; i<mergeLength; i++) {
              // 只合並連續的
              if (row[colkeys[i]]===cgvalue && row[colkeys[i+1]]===cgvalue && i+1<mergeLength) {
                colspan ++;
              }
            }
            finArray[1] = colspan;
          } else {
            finArray[1] = 0;
          }
          return finArray
        }
      }

    },
    mounted(){

    }
  }
</script>

<style scoped>

</style>

示例弊端：1.同官方一樣，合並行之后，就沒有在使用排序會渲染導致問題。2.示例控制了合並的列數和連續條件合並，所以tabaData數據列項順序必須同表頭名字順序一致。3.示例同官方一致采用的簡單的值合並，值相同就會進行合並計算，受2條件約束后不會出現前后跨行或跨列名字相同統計錯亂問題。

可調范圍：1.連續合並或指定條件合並，根據tabaData數據構成調控。2.可以根據id或其他特殊標識符進行合並，根據tabaData數據構成調控。3.增加合並規則和唯一判斷條件后tabaData數據可以不同表頭名順序一致（非連續合並）。