在 Vue.js 中使用分页

翻译 科大大 ⋅ 于 1个月前 ⋅ 最后回复由 olidev 1周前 ⋅ 176 阅读 ⋅ 原文地址
这是一篇社区协同翻译的文章,已完成翻译,更多信息请点击 协同翻译介绍

file

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

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

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

data(){
    return {
      pageNumber: 0  // default to page 0
    }
}
Ellison 翻译于 1个月前

对于 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);
}
科大大 翻译于 1个月前

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

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

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

科大大 翻译于 1个月前

在 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

科大大 翻译于 1个月前

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

非常感谢你的阅读!

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

Ellison 翻译于 1个月前

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

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


本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

回复数量: 1
  • olidev
    2周前

    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.

暂无评论~~
您需要登陆以后才能留下评论!

Vue.js 官方中文文档

前端开发环境部署