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>