elementUI表格内容的行列合并

说明：本篇采用2.12版本，在官方文档上面分别提供了行或列的合并，整合起来后根据个人或项目不同的需求，整合起来的合并效果会不相同，这里只进行举例。

文末说明示例弊端和本篇示例可调控范围

<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style=" 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数据可以不同表头名顺序一致（非连续合并）。