How does vue v-data-table rowspan works?

[Lelouch-Ramperge]

I'm new to programing and started with vue, now working on a web page. (please understand that my English isn't perfect)

• I am tring to merge 4 rows into 1 in my table. Not all the columes, but only one.

• I want my table to look like this: enter image description here

I looked for some sample codes, but it seems not appropriate for my app.
I understood that "v-slot:item" might works to solve this problem, but don't know how.

This is my vue templete

<template>  
  <v-row>
    <v-col>
      <v-card class="list_custm">
        <v-card-title>
          User Information
          <v-spacer></v-spacer>
          <v-spacer></v-spacer>
          <v-spacer></v-spacer>
          <v-spacer></v-spacer>
          <v-spacer></v-spacer>
          <v-spacer></v-spacer>
          <v-spacer></v-spacer>
          <v-spacer></v-spacer>
          <v-text-field
            v-model="search"
            append-icon="mdi-magnify"
            placeholder="Search"
            outlined
            rounded
            hide-details
            dense
          >
          </v-text-field>
          <v-btn rounded icon color="white">
            <v-icon>mdi-refresh</v-icon>
          </v-btn>
        </v-card-title>
        <v-data-table
          :headers="headers"
          :items="LogData"
          :search="search"
          :loading="loading"
          loading-text="Loading... Please wait"
          :page.sync="page"
          :items-per-page="itemsPerPage"
          hide-default-footer
          class="elevation-0 list_table"
          @page-count="pageCount = $event"
        >
        <div class="text-center pt-2">
          <v-pagination
            v-model="page"
            :length="pageCount"
            color="black"
            :total-visible="totalVisible"
            next-icon="mdi-menu-right"
            prev-icon="mdi-menu-left"
          ></v-pagination>
        </div>
      </v-card>
    </v-col>
  </v-row>
</template>

Please see my data.

export default class Report extends Vue {
  private search:string = '';
  private loading:boolean = false;
  private page:number = 1;
  private itemsPerPage:number = 10;
  private pageCount:number = 10;
  private totalVisible:number = 10; 
  private headers: Array<{
    text: string;
    align: string;
    sortable: boolean;
    value: string;
  }> = [];

  public logData = new Array<Log>();
  
  get LogList() {
    return this.logData;
  }

  mounted() {
    this.setData();
  }

setData() {
    // headers
    this.headers = [
      {
        text: Game Num,
        align: "start",
        sortable: false,
        value: "gameNum"
      },
      {
        text: this.$t("games.item01").toString(),
        align: "start",
        sortable: false,
        value: "nickname"
      },
      {
        text: this.$t("games.item02").toString(),
        align: "end",
        sortable: false,
        value: "startBal"
      },
      {
        text: this.$t("games.item03").toString(),
        align: "end",
        sortable: false,
        value: "endBal"
      },
      {
        text: this.$t("games.item04").toString(),
        align: "end",
        sortable: false,
        value: "exp"
      }
    ];

    // Dummy Data
    this.logData = [      
        {
          "gameNum":1,
          "nickname":"testUser1",
          "startBal":2000,
          "endBal":4000,
          "exp":1000,
        },
        {
          "gameNum":1,
          "nickname":"testUser2",
          "startBal":2000,
          "endBal":4000,
          "exp":1000,
        },
        {
          "gameNum":1,
          "nickname":"testUser3",
          "startBal":2000,
          "endBal":4000,
          "exp":1000,
        },
        {
          "gameNum":1,
          "nickname":"testUser4",
          "startBal":2000,
          "endBal":4000,
          "exp":1000,
        }
}

I tried this code right below v-data-table, but doesn't work.

    <v-data-table
      :headers="headers"
      :items="pokerLogData"
      :search="search"
      :loading="loading"
      loading-text="Loading... Please wait"
      :page.sync="page"
      :items-per-page="itemsPerPage"
      hide-default-footer
      class="elevation-0 list_table"
      @page-count="pageCount = $event"
    >
        
        // where I modified -->
        <template v-slot:[`item.gameNum`]="{ item }">
        <tr v-for="(item, i) in LogData" :key="i">
        <td
          :rowspan="item.same_num"
          v-if="!i? true:item[i-1].gameNum=== item[i].gameNum? '':true"
          >
          {{item.gameNum}}
        </td>
        </tr>          
      </template>