element-ui 合並相鄰的相同行 span-method

vue

<div id="app">
<template>
  <div>

    <el-table :data="tableData6" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
      <el-table-column prop="id" label="ID" width="180">
      </el-table-column>
      <el-table-column prop="name" 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>
</div>

 

 

javascript

function getRowIndex(objArr, index) {
    return objArr[index]._rs === 0 ? getRowIndex(objArr, index - 1) : index;
}

const spanMethod = function(name) {
  // name 需要做相鄰合並的屬性名稱
    var a = []; // 做一個二維數組
    
  return function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    console.log({ row, column, rowIndex, columnIndex, a })

    // 合並第nameClunmnIndex列
    if (column.property === name) {
        let aI = a[columnIndex] && a[columnIndex][rowIndex];
      console.log(1)

      if (!aI) {
          // 未判斷過的進行相關處理
        if(!a[columnIndex]) {
          a[columnIndex] = [];
        }
        console.log(2)

        aI = {
            _rs: 1,
          _cs: 1,
          [name]: row[name],
        };
        console.log(3)

        a[columnIndex][rowIndex] = aI;
        console.log(4)

        if (rowIndex && a[columnIndex][rowIndex - 1][name] === row[name]) {
            // 如果不是第一個參數 且上一個參數和這一個參數相同
          console.log(5)

          // 隱藏這個參數
          aI._rs = 0;
          aI._cs = 0;
          
          a[columnIndex][
              getRowIndex(a[columnIndex], rowIndex - 1)
          ]._rs += 1;
        }

      }

      return [aI._rs, aI._cs]
      }
    };
}

var Main = {
    data() {
      return {
        tableData6: [{
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987128',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }]
      };
    },
    methods: {
      objectSpanMethod: spanMethod('id'),
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')