Vue 分页和总计

在 Vue 中实现分页和总计功能是很常见的需求。在这篇文章中，我们将介绍如何使用 Vue 实现这些功能。

分页

在实现分页之前，我们需要有一个数组用于存储所有数据。然后，我们需要计算出需要展示哪些数据以及展示多少数据。

数据源

假设我们有一个包含 100 条数据的数组，可以使用以下代码来模拟：

const data = []

for (let i = 1; i <= 100; i++) {
  data.push({ id: i, name: `name ${i}` })
}

计算分页

接下来，我们需要计算分页中每一页需要展示的数据，以及当前展示的是哪一页。

dataPerPage: 10, // 每页展示的数据个数
currentPage: 1, // 当前页码

computed: {
  // 当前页需要展示的数据
  currentData() {
    const startIndex = (this.currentPage - 1) * this.dataPerPage
    return this.data.slice(startIndex, startIndex + this.dataPerPage)
  },

  // 分页按钮需要展示的页码
  pageNumbers() {
    const totalPages = Math.ceil(this.data.length / this.dataPerPage)
    const pageNumbers = []

    for (let i = 1; i <= totalPages; i++) {
      pageNumbers.push(i)
    }

    return pageNumbers
  }
}

以上代码中，currentData 方法返回需要展示的数据，而 pageNumbers 方法返回需要展示的页码。

渲染分页

最后，我们需要在模板中渲染分页。可以使用 v-for 循环展示分页按钮，然后通过 @click 定义点击事件来切换页面。

<div v-for="pageNumber in pageNumbers" :key="pageNumber">
  <button @click="currentPage = pageNumber">{{ pageNumber }}</button>
</div>

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in currentData" :key="item.id">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
    </tr>
  </tbody>
</table>

以上代码中，我们在 button 中定义了 @click="currentPage = pageNumber" 来切换当前页码。在 <tr v-for="item in currentData"> 中，我们使用 v-for 来循环展示当前页需要展示的数据。

总计

在 Vue 中实现数据的总计功能也是很常见的需求。

计算总计

假设我们有一个数组，其中的每一项都包含了 amount 字段，我们可以使用以下代码来计算总计：

data: [
  { id: 1, name: 'name 1', amount: 10 },
  { id: 2, name: 'name 2', amount: 20 },
  { id: 3, name: 'name 3', amount: 30 },
],

computed: {
  totalAmount() {
    return this.data.reduce((total, item) => total + item.amount, 0)
  }
}

渲染总计

最后，我们需要在模板中渲染总计。

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="item in data" :key="item.id">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.amount }}</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total amount:</td>
      <td>{{ totalAmount }}</td>
    </tr>
  </tfoot>
</table>

以上代码中，我们使用 tfoot 来展示总计，在模板中使用 {{ totalAmount }} 展示计算出的总计值。

总结

在 Vue 中实现分页和总计功能是很简单的。我们可以使用计算属性来计算需要展示的数据以及分页按钮的页码，然后在模板中使用循环展示。同时，我们也可以使用计算属性来计算数据的总计，并在模板中使用展示。