实现效果

相同ID的行，ID列合并

下面的代码粘贴到这个网站就可以在线运行

codepen.io/pen/

HTML

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.7/lib/index.js"></script>
<div id="app">
<template>
  <div>
 
    <el-table
      :data="tableData"
      :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>

CSS

@import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");

JS

var Main = {
    data() {
      return {
        tableData: [{
          id: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987122',
          name: '王小虎',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987122',
          name: '王小虎',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: '王小虎',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: '王小虎',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }]
      };
    },
    methods: {
    // 合并相同客户ID单元格
    objectSpanMethod({row,column,rowIndex}) {

      // debugger
      if (column.label==="ID") {
        let list = this.tableData
        let len = list.length;
        let temp = list[rowIndex].id
        let _row = 0;

        if( rowIndex-1 >= 0 && temp === list[rowIndex-1].id ) 
          {
            return {
              // [0,0] 表示这一行不显示， [2,1]表示行的合并数
              rowspan: 0,
              colspan: 0
            };
          }
        for(let j=rowIndex; j<len; j++){
          if(list[j].id === temp ){ _row++ }
          else break
        }
        const _col = _row > 0 ? 1 : 0;
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        };

      }

    },
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')