Vue分页对象数组

Posted 2023-02-22

【中文标题】Vue分页对象数组

【英文标题】：Vue pagination array of objects

【发布时间】：2021-03-26 17:42:42

【问题描述】：

我是 Vue 和数组的新手。我想对我的 json 数组进行分页并将其限制为每页仅 10 个项目。但是在我的<tr> 正文中，它显示了数组中的所有列表。我尝试了其他方法，但没有奏效。谁能帮我找到对这个 json 数组进行分页并反映在我的表格中的最佳方法？谢谢。

这是代码：

https://codesandbox.io/s/exciting-kapitsa-8d46t?file=/src/App.vue:1415-2437

App.vue

<template>
  <div id="app">
    <table class="table t3">
      <thead class="thead">
        <tr class="tr">
          <th class="td no" >
            <span class="has-text-orange">No</span>
          </th>
          <th class="td">
            <span class="has-text-orange">Name</span>
          </th>
        </tr>
      </thead>
      <tbody
        class="searchable tbody"
        style="max-height: 200px; min-height: 200px"
      >
        <tr class="tr" v-for="(p, index) in alphabets" :key="index">
          <td class="td no" > ++index </td>
          <td class="td"> p.letter </td>
        </tr>
      </tbody>
    </table>
    <div class="column is-12">
      <nav
        class="pagination is-right"
        role="navigation"
        aria-label="pagination"
      >
        <ul class="pagination-list">
          <li>
            <a @click="prev"> Prev </a>
          </li>
          <li>
            <span
              class="pagination-link go-to has-text-orange"
              aria-label="Goto page 1"
              > current </span
            >
          </li>
          <li>
            <a @click="next()"> Next </a>
          </li>

          <li>
            <input type="text" class="pagination-link" />
          </li>
          <li>
            <button class="button">Go</button>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</template>

<script>
export default 
  name: "App",
  components: ,
  data() 
    return 
      current: 1,
      alphabets: [
         letter: "a" ,
         letter: "b" ,
         letter: "c" ,
         letter: "d" ,
         letter: "e" ,
         letter: "f" ,
         letter: "g" ,
         letter: "h" ,
         letter: "i" ,
         letter: "j" ,
         letter: "k" ,
         letter: "l" ,
         letter: "m" ,
         letter: "n" ,
         letter: "o" ,
         letter: "p" ,
         letter: "q" ,
         letter: "r" ,
         letter: "s" ,
         letter: "t" ,
         letter: "u" ,
         letter: "v" ,
         letter: "w" ,
         letter: "x" ,
         letter: "y" ,
         letter: "z" ,
      ],
    ;
  ,
;
</script>

<style>
#app 
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

</style>

【参考方案1】：

循环通过缩减集而不是所有数据。你有一个current 页面；为pageSize 创建一个属性：

pageSize: 10

计算缩减集的索引边界，每当current 更改（或pageSize）时更改：

computed: 
  indexStart() 
    return (this.current - 1) * this.pageSize;
  ,
  indexEnd() 
    return this.indexStart + this.pageSize;
  ,
,

使用另一个计算从边界推导出约简集：

paginated() 
   return this.alphabets.slice(this.indexStart, this.indexEnd);

循环通过缩减集而不是所有数据：

v-for="(p, index) in paginated"

这是您更新的演示（当它们溢出时，您必须修复下一个和上一个按钮）：

new Vue(
  el: "#app",
  data() 
    return 
      current: 1,
      pageSize: 10,
      alphabets: [
         letter: "a" ,
         letter: "b" ,
         letter: "c" ,
         letter: "d" ,
         letter: "e" ,
         letter: "f" ,
         letter: "g" ,
         letter: "h" ,
         letter: "i" ,
         letter: "j" ,
         letter: "k" ,
         letter: "l" ,
         letter: "m" ,
         letter: "n" ,
         letter: "o" ,
         letter: "p" ,
         letter: "q" ,
         letter: "r" ,
         letter: "s" ,
         letter: "t" ,
         letter: "u" ,
         letter: "v" ,
         letter: "w" ,
         letter: "x" ,
         letter: "y" ,
         letter: "z" ,
      ],
    ;
  ,
  computed: 
    indexStart() 
      return (this.current - 1) * this.pageSize;
    ,
    indexEnd() 
      return this.indexStart + this.pageSize;
    ,
    paginated() 
      return this.alphabets.slice(this.indexStart, this.indexEnd);
    
  ,
  methods: 
    prev() 
      this.current--;
    ,
    next() 
      this.current++;
    
  
);

<div id="app">
    <table class="table t3">
      <thead class="thead">
        <tr class="tr">
          <th class="td no" >
            <span class="has-text-orange">No</span>
          </th>
          <th class="td">
            <span class="has-text-orange">Name</span>
          </th>
        </tr>
      </thead>
      <tbody
        class="searchable tbody"
        style="max-height: 200px; min-height: 200px"
      >
        <tr class="tr" v-for="(p, index) in paginated" :key="index">
          <td class="td no" > indexStart + ++index </td>
          <td class="td"> p.letter </td>
        </tr>
      </tbody>
    </table>
    <div class="column is-12">
      <nav
        class="pagination is-right"
        role="navigation"
        aria-label="pagination"
      >
        <ul class="pagination-list">
          <li>
            <a @click="prev"> Prev </a>
          </li>
          <li>
            <span
              class="pagination-link go-to has-text-orange"
              aria-label="Goto page 1"
              > current </span
            >
          </li>
          <li>
            <a @click="next()"> Next </a>
          </li>

          <li>
            <input type="text" class="pagination-link" />
          </li>
          <li>
            <button class="button">Go</button>
          </li>
        </ul>
      </nav>
    </div>
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/buefy/0.9.4/buefy.min.css" integrity="sha512-kYGHZRStwK4F8bgVhj/J5IEWmEjLbQ7re6mQiYx/LH5pfl8bDQ3g5SaExM/6z59mASfENR8xwVhywnm8ulVvew==" crossorigin="anonymous" />