VueJs如何制作限制器和范围的分页..？

我有这样的代码：

var demoList = new Vue({ el: '#demoList', data: { items: [{ "id": 1, "name": "Tom" }, { "id": 2, "name": "Kate" }, { "id": 3, "name": "Jack" }, { "id": 4, "name": "Jill" }, { "id": 5, "name": "aa" }, { "id": 6, "name": "bb" }, { "id": 7, "name": "cc" }, { "id": 8, "name": "dd" }, { "id": 1, "name": "Tom" }, { "id": 2, "name": "Kate" }, { "id": 3, "name": "Jack" }, { "id": 4, "name": "Jill" }, { "id": 5, "name": "aa" }, { "id": 6, "name": "bb" }, { "id": 7, "name": "cc" }, { "id": 8, "name": "dd" }, ], loading: false, order: 1, searchText: null, ccn: null, currentPage: 0, itemsPerPage: 2, resultCount: 0 }, computed: { totalPages: function() { console.log(Math.ceil(this.resultCount / this.itemsPerPage) + "totalPages"); return Math.ceil(this.resultCount / this.itemsPerPage); } }, methods: { setPage: function(pageNumber) { this.currentPage = pageNumber; console.log(pageNumber); } }, filters: { paginate: function(list) { this.resultCount = this.items.length; console.log(this.resultCount + " Result count"); console.log(this.currentPage + " current page"); console.log(this.itemsPerPage + " items per page"); console.log(this.totalPages + " Total pages 2"); if (this.currentPage >= this.totalPages) { this.currentPage = Math.max(0, this.totalPages - 1); } var index = this.currentPage * this.itemsPerPage; console.log(index + " index"); console.log(this.items.slice(index, index + this.itemsPerPage)); return this.items.slice(index, index + this.itemsPerPage); } } }); 

 a { color: #999; } .current { color: red; } ul { padding: 0; list-style-type: none; } li { display: inline; margin: 5px 5px; } 

  
 
 
 
 
 
 
Provider 
 
 
 
 
 
 
{{item.name}}
 
 
 
 
 
 
 {{ pageNumber+1 }} 
 
  

我试图用vuejs创建一个寻呼机，所以我很想知道是否有人可以指定一个如何制作这样的寻呼机的例子，如果可能“1-2-3-4-5 … 55”??，谢谢再次提供任何帮助。

Answer 1

看看这段代码：

https://jsfiddle.net/os7hp1cy/48/

HTML：

 
 
  {{ pageNumber+1 }} 
  

CSS：

 a.first::after { content:'...' } a.last::before { content:'...' } 

基本上，它只显示当前页面2页内的分页。 然后它还会显示第1页和最后一页，并在CSS之前或之后放置"..." 。 因此，如果您在第10页，它将显示：

1... 8 9 10 11 12 ...21

Answer 2

由于此filter迁移https://vuejs.org/v2/guide/migration.html#Filters-Outside-Text-Interpolations-removed，我已经分叉@ Jeff的代码并为Vue 2制作了一个可用的版本。

paginate方法被移动到计算：

 paginate: function() { if (!this.users || this.users.length != this.users.length) { return } this.resultCount = this.users.length if (this.currentPage >= this.totalPages) { this.currentPage = this.totalPages } var index = this.currentPage * this.itemsPerPage - this.itemsPerPage return this.users.slice(index, index + this.itemsPerPage) } 

警告：我没有应用文本filter，只是首先使用分页。

https://jsfiddle.net/c1ghkw2p/