【发布时间】：2021-08-06 20:29:07
【问题描述】：
我有一个关于 vue 分页的问题。所以，我有一个票对象，你可以在下面看到代码。目前它显示如下内容：
所以我想要实现的是在我的对象中显示所有票。但每周。我的意思是本周是一年中的第 31 周。然后从今天到周日，它应该显示在第一页。但从下周一到周日（第 32 周），当您单击下一步按钮时，它应该会显示在下一页上。 因此，在我的情况下，我可以找到对象的周数，它包括 31、32 和 33 周，并且由于有 3 个不同的周，您可以单击下一个按钮 2 次（因为有 3 个不同的周/页）。我不能做的，分页。如果你能帮我解决这个问题，我会很高兴的。 这是我的组件：
<template>
<div class="container" id="app">
<div class="filter input-group mb-3">
</div>
<table class="table" v-for="date in dateSets()">
<thead>
<tr class="list-heading">
<td colspan="3">
{{ date.getDate() }}/{{ date.getMonth() + 1 }}/{{
date.getFullYear()
}}
{{ setDayOfDate(date.getDay()) }}
</td>
</tr>
</thead>
<tbody>
<tr class="list-content" v-for="ticket in findProducts(tickets, date)">
<!-- <th>{{ (currPage-1) * countOfPage + index + 1 }}</th>-->
<td>{{ ticket.time }}</td>
<td>{{ ticket.date }}</td>
<td>{{ ticket.name }}</td>
</tr>
</tbody>
</table>
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li
class="page-item"
v-bind:class="{ disabled: currPage === 1 }"
@click.prevent="setPage(currPage - 1)"
>
<a class="page-link" href="">Prev</a>
</li>
<li
class="page-item"
v-bind:class="{ disabled: currPage === weeksSize }"
@click.prevent="setPage(currPage + 1)"
>
<a class="page-link" href="">Next</a>
</li>
</ul>
</nav>
</div>
</template>
<script>
export default {
data() {
return {
currPage: 1,
filter_name: "",
tableHeader: "",
// oldestFirst: false,
weeks: new Set(),
tickets: [
{
id: 0,
time: "09:45",
date: new Date(),
name: "Swimming in the hillside pond",
},
{
id: 1,
time: "09:45",
date: new Date(),
name: "Swimming in the hillside pond",
},
{
id: 2,
time: "09:45",
date: new Date("2021-08-06"),
name: "Swimming in the hillside pond",
},
{
id: 3,
time: "06:30",
date: new Date("2021-08-05"),
name: "Schwimmen im Hangeweiher",
},
{
id: 4,
time: "09.45",
date: new Date("2021-08-03"),
name: "Swimming in the hillside pond",
},
{
id: 5,
time: "09.45",
date: new Date("2021-08-07"),
name: "Swimming in the hillside pond",
},
{
id: 6,
time: "09.45",
date: new Date("2021-08-08"),
name: "Swimming in the hillside pond",
},
{
id: 7,
time: "09:45",
date: new Date("2021-08-09"),
name: "Swimming in the hillside pond",
},
{
id: 8,
time: "09:45",
date: new Date("2021-08-10"),
name: "Swimming in the hillside pond",
},
{
id: 9,
time: "09:45",
date: new Date("2021-08-09"),
name: "Swimming in the hillside pond",
},
{
id: 10,
time: "06:30",
date: new Date("2021-08-10"),
name: "Schwimmen im Hangeweiher",
},
{
id: 11,
time: "09.45",
date: new Date("2021-08-12"),
name: "Swimming in the hillside pond",
},
{
id: 12,
time: "09.45",
date: new Date("2021-08-11"),
name: "Swimming in the hillside pond",
},
{
id: 13,
time: "09.45",
date: new Date("2021-08-13"),
name: "Swimming in the hillside pond",
},
],
};
},
computed: {
weeksSize() {
const s = this.getAllWeekNumbers(this.tickets);
return s.size;
},
splitDate: function () {
let newDate = [...this.list];
newDate.map((el) => {
return (el.date = el.date.split(" "));
});
return newDate;
},
},
methods: {
setPage: function (idx) {
if (idx <= 0 || idx > this.totalPage) {
return;
}
this.currPage = idx;
},
currentDate() {
const current = new Date();
const date = `${current.getDate()}/${
current.getMonth() + 1
}/${current.getFullYear()}`;
return date;
},
dateSets() {
const today = new Date();
const sunday = new Date();
sunday.setDate(sunday.getDate() - sunday.getDay() + 7);
const dates = [];
const diff = sunday.getDate() - today.getDate();
for (let i = 0; i <= diff; i++) {
const upDate = new Date();
upDate.setDate(today.getDate() + i);
dates.push(upDate);
}
console.log(dates);
return dates;
},
setDayOfDate(number) {
if (number === 0) {
return "Sonntag";
} else if (number === 1) {
return "Montag";
} else if (number === 2) {
return "Dienstag";
} else if (number === 3) {
return "Mittwoch";
} else if (number === 4) {
return "Donnerstag";
} else if (number === 5) {
return "Freitag";
} else {
return "Samstag";
}
},
getAllWeekNumbers(tickets) {
tickets.forEach(ticket => {
let result = this.getWeekNumber(ticket.date);
this.weeks.add(result)
});
this.sortSet(this.weeks);
console.log(this.weeks);
return this.weeks;
},
getWeekNumber(date) {
const oneJan = new Date(date.getFullYear(), 0, 1);
const numberOfDays = Math.floor((date - oneJan) / (24 * 60 * 60 * 1000));
let weekNumber = Math.ceil((date.getDay() + 1 + numberOfDays) / 7);
return weekNumber;
},
sortSet(set) {
const entries = [];
for (const member of set) {
entries.push(member);
}
set.clear();
for (const entry of entries.sort()) {
set.add(entry);
}
return set;
},
findProducts(products, date) {
return products.filter((product) => {
return (
product.date.getDate() === date.getDate() &&
product.date.getMonth() === date.getMonth() &&
product.date.getFullYear() === date.getFullYear()
);
});
},
},
};
</script>
我知道这有点长，但我已经为此苦苦挣扎了一段时间。所以请看看并给我一些建议。 谢谢
【问题讨论】：
标签： javascript vue.js vuejs2 pagination