1

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 make 4 rows into 1 row 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.

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.room`]="{ item }">
            <tr v-for="(item, i) in pokerLogData" :key="i">
            <td
              :rowspan="item.same_num"
              v-if="!i? true:item[i-1].handID === item[i].handID? '':true"
              >
              {{item.room}}
            </td>
            </tr>          
          </template>
Lelouch
  • 11
  • 2

1 Answers1

0

Below are the steps to achieve this requirement :

  • grouping the input array by gameNum and resulting with an object using Array.reduce() method.
  • Then structuring the output based on the game object we have.

Demo of above mentioned 2 steps :

const gameList = [
  {
    "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,
  }
];
const resultArr = [];

// grouping by game num and resulting with an object using Array.reduce() method
const groupByGame = gameList.reduce((group, item) => {
  const { gameNum } = item;
  group[gameNum] = group[gameNum] ?? [];
  group[gameNum].push(item);
  return group;
}, {});

// Finally structuring the output based on the game object we have.
Object.keys(groupByGame).forEach((item) => {
    resultArr.push({
      'gameNum': item,
      'subCat': groupByGame[item]
    })
});

console.log(resultArr);
  • Now, adding rowspan to the subCat for the gameNum we have.

Full working Demo :

const gameList = [
  {
    "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,
  }
];
const resultArr = [];

// grouping by game num and resulting with an object using Array.reduce() method
const groupByGame = gameList.reduce((group, item) => {
  const { gameNum } = item;
  group[gameNum] = group[gameNum] ?? [];
  group[gameNum].push(item);
  return group;
}, {});

// Finally structuring the output based on the game object we have.
Object.keys(groupByGame).forEach((item) => {
    resultArr.push({
      'gameNum': item,
      'subCat': groupByGame[item]
    })
});
    
new Vue({
  el: '#app',
  data() {
    return {
      items: resultArr,
      gamesHeader: [
        { text: "Game Num", value: "gameNum" },
        { text: "Nick Name", value: "nickname" },
        { text: "Start Bal", value: "startBal" },
        { text: "End Bal", value: "endBal" },
        { text: "Exp", value: "exp" }
      ]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.3.15/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-simple-table dense>
    <template v-slot:default>
      <thead>
          <tr>
            <th class="blue lighten-5" v-for="names in gamesHeader">{{ names.value }}</th>
          </tr>
      </thead>
      <tbody>
          <template v-for="item in items">
            <tr v-for="(subitem, iSub) in item.subCat" :key="subitem.gameNum">
              <td v-if="iSub === 0" :rowspan="item.subCat.length" class="s">{{ item.gameNum }}</td>
              <td>{{ subitem.nickname }}</td>
              <td>{{ subitem.startBal }}</td>
              <td>{{ subitem.endBal }}</td>
              <td>{{ subitem.exp }}</td>
            </tr>
          </template>
      </tbody>
    </template>
  </v-simple-table>
</div>
Debug Diva
  • 26,058
  • 13
  • 70
  • 123