在 Vue.js 中使用分页
5

file

分页功能通过允许用户以较小的块或页面可视化数据来增强用户体验。 下面介绍如何创建带分页的 Vue.js 组件,以便我们一次只能查看部分数据。

我将首先在我们的 JavaScript 对象中逐一进行分析,然后显示模板。

我唯一需要的本地数据是页码。

data(){
    return {
      pageNumber: 0  // default to page 0
    }
}

对于 props 来说,数据是必要的,另外我还定义了 size 这个参数来保存每一页数据的数量的最大值。

props:{
    listData:{
      type:Array,
      required:true
    },
    size:{
      type:Number,
      required:false,
      default: 10
    }
}

在 methods 中,我定义了下一页和上一页的两个方法:

methods:{
      nextPage(){
         this.pageNumber++;
      },
      prevPage(){
        this.pageNumber--;
      }
}

我使用计算属性值来计算一共有多少页:

pageCount(){
      let l = this.listData.length,
          s = this.size;
      return Math.floor(l/s);
}

paginatedData 就是获取过滤后的数据的计算属性:

paginatedData(){
    const start = this.pageNumber * this.size,
          end = start + this.size;
     return this.listData.slice(start, end);
}

修改:在一开始我使用 .splice 来复制数组,但更完美的做法是使用 .slice 方法,在这里感谢 Alexander Karelas

在 template 中:

<div>
  <ul>
    <li v-for="p in paginatedData">
      {{p.first}} 
      {{p.last}}  
      {{p.suffix}}
    </li>
  </ul>
  <button @click="prevPage">
    Previous
  </button>
  <button @click="nextPage">
    Next
  </button>
</div>

我希望在最开始或者最末尾阻止用户按下按钮,对于 prevPage 按钮,我加入了 :disabled="pageNumber=0" 而对于 nextPage 按钮,我加入 :disabled="pageNumber >= pagecount -1"

下面是该组件的demo:

https://codepen.io/dennythecoder/pen/aEwdPe

事情有时可能很容易过时,但分页是一项非常简单的功能,我们可以在不付出很多精力的情况下为用户提供便利。

非常感谢你的阅读!

Denny Headrick 是美国空军的 Web 开发人员,他喜欢他的工作方式。 除了在各种平台和 Vue.js 上进行开发之外,他还喜欢偶尔发表博客。 你可以在 @dennythecoder 的 Twitter 上关注他。

kwen

原文地址:https://medium.com/@denny.headrick/pagin...

译文地址:https://vuejscaff.com/topics/84/using-pa...

讨论数量: 1

If you are creating pagination in vue with PHP for backend, you will also have to create the MVC for your app. You can also use Database Seeder for automatic database update of your app.

4个月前

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
  • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!