vue elementui 合并相同id的数组的第一列

json:
      observeTableData: [
        {
          id: 's1',
          student: '1号',
          number: '01',
          className: '大一班',
          time: '2024/4/410:21',
          content: {
            teacherName: '黄老师',
            observeId: 'o1',
            observe: {              
              txt: '1号幼儿能快速通过声音判断找到闹闹',
              img: ['图片地址',
                '图片地址',
                '图片地址',
                '图片地址',
                '图片地址',
                '图片地址',
                '图片地址',
                '图片地址',
                '图片地址'
              ],              
            },
            evaluate: '动作能力-身体移动-跑',
            phase: [
              '阶段1:手臂高位保护跑或中位保护跑，小碎步为主，身体直立，支撑腿不能完全伸展。动作缺乏节奏感，脚步沉重，方向掌握不好，两手臂不能自然地配合脚的动作摆动。',
              '阶段2:高音沉，低音稳，总之一个字通透'
            ],
          }
        },
        {
          id: 's1',
          student: '1号',
          number: '01',
          className: '大一班',
          time: '2024/4/410:22',
          content: {
            teacherName: '黄黄的老师',
            observeId: 'o2',
            observe: {
              txt: '1号幼儿能快速通过声音判断找到闹闹',
              img: ['图片地址',
                '图片地址',
                '图片地址',
                '图片地址',
                '图片地址'
              ],              
            },
            evaluate: '',
            phase: [],
          }
        },
        {
          id: 's2',
          student: '11号',
          number: '011',
          className: '大二班',
          time: '2024/4/410:22',
          content: {
            teacherName: '红老师',
            observeId: 'o3',
            observe: {
              txt: '',
              img: ['图片地址',
                '图片地址',
                '图片地址'
              ],              
            },
            evaluate: '',
            phase: [],
          }
        },
        {
          id: 's3',
          student: '13号',
          number: '013',
          className: '大三班',
          time: '2024/4/410:22',
          content: {
            teacherName: '红老师',
            observeId: 'o3',
            observe: {
              txt: '',
              img: ['图片地址',
                '图片地址',
                '图片地址'
              ],              
            },
            evaluate: '',
            phase: [],
          }
        },
        {
          id: 's3',
          student: '14号',
          number: '014',
          className: '大五班',
          time: '2024/4/410:22',
          content: {
            teacherName: '红红老师',
            observeId: 'o3',
            observe: {
              txt: '',
              img: ['图片地址',
                '图片地址',
                '图片地址'
              ],              
            },
            evaluate: '',
            phase: [],
          }
        }
      ],

html:
        <el-table
          :data="observeTableData"
          border
          :span-method="objectSpanMethod"
          style="width: 100%">
          <el-table-column
            label="学生"
            width="180">
            <template slot-scope='scope'>
              <div>{{ scope.row.className }}</div>
              <div>{{ scope.row.number }}-{{ scope.row.student }}学生</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="time"
            label="时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="content"
            label="记录内容">
            <template slot-scope='scope'>
              <div class="observe-structure">
                <div class="observe-structure-lef">观察教师：</div>
                <div class="observe-structure-rig">{{ scope.row.content.teacherName }}</div>
              </div>
              <div class="observe-structure">
                <div class="observe-structure-lef">观察记录：</div>
                <div class="observe-structure-rig">
                  <!--文本类型-->
                  <div class="o1">{{ scope.row.content.observe.txt }}</div>
                  <!--图片类型-->
                  <div class="o2">
                    <el-image v-for="item in scope.row.content.observe.img" :key="item.id" :src="item" fit="cover" style="margin-right: 10px; width: 160px; height: 100px"></el-image>                    
                  </div>
                </div>
                <div class="observe-detail" @click="openObserve = true">查看详细</div>
              </div>
              <div class="observe-structure" v-if="scope.row.content.evaluate">
                <div class="observe-structure-lef">幼儿发展水平评估：</div>
                <div class="observe-structure-rig">{{ scope.row.content.evaluate }}</div>
              </div>
              <div v-for="item in scope.row.content.phase" :key="item.id">{{ item }}</div>
            </template>
          </el-table-column>
        </el-table>
//重点在于:span-method="objectSpanMethod"

js：
    //合并table
    objectSpanMethod({ row, column, rowIndex, columnIndex }){
      if (columnIndex === 0) {
        // this.tableData  修改
        const _row = this.flitterData2(this.observeTableData).one[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
    },
    flitterData2(arr) {
      let spanOneArr = []
      let concatOne = 0
      arr.forEach((item, index) => {
          if (index === 0) {
              spanOneArr.push(1)
          } else {
              //name 修改
              if (item.pid === arr[index - 1].pid) { //pid就是判断相同的字段
                  //第一列需合并相同内容的判断条件
                  spanOneArr[concatOne] += 1
                  spanOneArr.push(0)
              }else {
                  spanOneArr.push(1)
                  concatOne = index
              }
          }
      })
      return {
        one: spanOneArr,
      }
    },