我是编程新手,刚开始使用vue,现在正在开发网页。(请理解我的英语并不完美(
我正设法把表中的4行变成1行。不是所有的骨灰龛,但只有一个。
我希望我的桌子看起来像这样:在此处输入图像描述
我查找了一些示例代码,但它似乎不适合我的应用程序。
这是我的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>
请查看我的数据。
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,
}
}
我在v-datatable下面尝试了这个代码,但不起作用。
<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>
以下是实现此要求的步骤:
- 按
gameNum
对输入数组进行分组,并使用array.reduce((方法生成一个对象 - 然后根据我们拥有的游戏对象构建输出
上述两个步骤的演示:
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);
- 现在,将
rowspan
添加到我们所拥有的gameNum
的subCat
中
完整工作演示:
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>