element-ui 表格合并

最终要实现的效果：

<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column type="index" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="class" label="班级"></el-table-column>
      <el-table-column prop="note" label="备注"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'demo',
  data () {
    return{
      tableData:[
        {name:'大米',age:'10岁',class:'三年级',note:'学习很好'},
        {name:'大米',age:'10岁',class:'三年级',note:'学习很好'},
        {name:'大米',age:'10岁',class:'三年级',note:'学习很好'},
        {name:'王大锤',age:'10岁',class:'三年级',note:'学习很好'},
        {name:'奥特曼',age:'10岁',class:'三年级',note:'学习很好'},
        {name:'奥特曼',age:'10岁',class:'三年级',note:'学习很好'},
      ]      
    }
  },
  mounted () {
    this.tableDatas();//目前数据默认是写死，所以直接执行该方法。项目中通过后台数据调用成功后，在表格渲染后执行该方法
  },
  methods: {
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      console.log(this.spanArr)
      if (columnIndex === 1) {                     
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    tableDatas(){
      let contactDot = 0;
      this.spanArr = [];
      this.tableData.forEach((item, index) => {
         item.index = index;
         if (index === 0) {
           this.spanArr.push(1);
           contactDot = 0
         }else{
           if(item.name==this.tableData[index-1].name){
             this.spanArr[contactDot] += 1;
             this.spanArr.push(0);
           }else{
             this.spanArr.push(1);
              contactDot = index;
           }
         }
      })
    }
  }
}
</script>
<style scoped>
</style>