element 表格合并

在这里插入代码片
<template>
  <div>
    <button @click="change"> @</button>
    <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="rel"
        label="具体数值">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  
    data() {
      return {
        tableData: [],
        spanArr:[],
        pos:'',
        reldata:[
          {
            id:"1",
            name:'张三',
            list:[
              {
                amount1: '第1数量',
                rel:'1'
              },
              {
                amount1: '第2数量',
                rel:'2'
              },
              {
                amount1: '第3数量',
                rel:'3'
              }
            ]
          },
          {
            id:"2",
            name:'李四',
            list:[
              {
                amount1: '第1数量',
                rel:'2'
              },
              {
                amount1: '第2数量',
                rel:'3'
              },
              {
                amount1: '第3数量',
                rel:'4'
              }
            ]
          }
          
        ],
      };
    },
  mounted(){
  },
    methods: {
      change(){
        this.reldata.forEach(item=>{
          item.list.forEach(sitem=>{
            this.tableData.push(
              {
                id:item.id,
                name:item.name,
                amount1:sitem.amount1,
                rel:sitem.rel,
              }
            )
          })
        })

        this.getSpanArr(this.tableData)
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
          if (columnIndex === 0 || columnIndex === 1) {
            const _row = this.spanArr[rowIndex];
            console.log(this.spanArr[rowIndex],"")
            const _col = _row > 0 ? 1 : 0;
            return {
                  rowspan: _row,
                  colspan: _col
            }
          }
      },
      getSpanArr(data) {　
        if(data&&data.length > 0){
          for (var i = 0; i < data.length; i++) {
            if (i === 0) {
              this.spanArr.push(1);
              this.pos = 0
            } else {
              // 判断当前元素与上一个元素是否相同
            if (data[i].id === data[i - 1].id) {
                this.spanArr[this.pos] += 1;
                this.spanArr.push(0);
              } else {
                this.spanArr.push(1);
                this.pos = i;
              }
            }

          }
        }
      },
    }
};
</script>

<style  scoped>


</style>