拆分列表项并显示在表格内的多个页面中[关闭]答案

【问题标题】：Split list item and show in multiple pages inside table [closed]拆分列表项并显示在表格内的多个页面中[关闭]
【发布时间】：2019-02-10 04:03:07
【问题描述】：

我有一个包含 37 个项目的列表，我想在一个表格内的四个不同页面中显示这些项目。

如何使用 javascript 或 vue.js 拆分这些项目并显示在 4 个不同的页面中？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

如果您想要自己的实现，您可以过滤您的项目列表并根据您想要在一页中的项目数将其拆分为子数组。下面是一个如何实现的示例代码。

示例组件的内容：

data() {
   return {
      currentPage: 1,
      itemsPerPage: 3,
      items: [{id: 1, title: 'test1'},{id: 2, title: 'test2'},{id: 3, title: 'test3'},{id: 4, title: 'test4'},{id: 5, title: 'test5'},{id: 6, title: 'test6'},{id: 7, title: 'test7'},{id: 8, title: 'test8'}]
   }
},
computed: {
   paginatedItems() {
      let page = 1;
      return [].concat.apply(
         [], 
         this.items.map( (item, index) => 
            index % this.itemsPerPage ? 
               [] : 
               { page: page++, items: this.items.slice(index, index + this.itemsPerPage)}
         )
       );
   },
   currentPageItems() {
      let currentPageItems = this.paginatedItems.find(pages => pages.page == this.currentPage);
        return currentPageItems ? currentPageItems.items : [];
   }
},
methods {
   changePage(pageNumber) {
      if(pageNumber !== this.currentPage)
           this.currentPage = pageNumber;
   }
}

示例模板：

  <table class="table">
    <thead>
      <tr>
        <th>ID</th>
        <th>Title</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in currentPageItems" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.title}}</td>
      </tr>
    </tbody>
  </table>
  <div>
    <span>Page:</span>
    <button v-for="i in paginatedItems.length" class="btn btn-secondary mr-1" :class="{'btn-success' : currentPage === i }" @click="changePage(i)">
      {{i}}
    </button>
  </div>

http://jsfiddle.net/eywraw8t/334506/

【讨论】：