vue分页（Vue分页功能最后一页显示没有更多数据）

[img]

简介：

本文将介绍使用Vue.js实现分页的方法。Vue.js是一款流行的JavaScript框架，它提供了一套易于使用和灵活的工具来构建现代化的、复杂的Web应用程序。在本文中，我们将使用Vue.js和一些库来实现一个简单的分页功能。

多级标题：

一、创建Vue实例

二、准备数据

三、创建分页组件

1.设置组件属性和数据

2.计算分页数和当前页码

3.设置分页按钮

四、添加事件处理

1.监听分页按钮的点击事件

2.计算页码

3.更新分页组件状态

内容详细说明：

一、创建Vue实例

首先，我们要创建一个Vue实例，用来绑定我们的分页组件。

var app = new Vue({

el: '#app',

data: {

currentPage: 1,

pageSize: 10,

total: 100

}

});

在上面的代码中，我们定义了一个名为“app”的Vue实例，它绑定了id为“app”的HTML元素。同时，我们定义了三个数据属性：currentPage表示当前页码，pageSize表示每页显示的数据量，total表示总共的数据量。

二、准备数据

分页需要数据来支持，所以我们需要准备一些数据去测试我们的分页组件。本文中，我们使用一个数组来作为我们的数据源。

var dataList = [

{id: 1, name: "张三", age: 20},

{id: 2, name: "李四", age: 21},

{id: 3, name: "王五", age: 22},

{id: 4, name: "赵六", age: 23},

{id: 5, name: "钱七", age: 24},

{id: 6, name: "孙八", age: 25},

{id: 7, name: "周九", age: 26},

{id: 8, name: "吴十", age: 27},

{id: 9, name: "郑十一", age: 28},

{id: 10, name: "王十二", age: 29},

{id: 11, name: "李十三", age: 30},

{id: 12, name: "张十四", age: 31},

{id: 13, name: "王十五", age: 32},

{id: 14, name: "赵十六", age: 33},

{id: 15, name: "孙十七", age: 34},

{id: 16, name: "钱十八", age: 35},

{id: 17, name: "周十九", age: 36},

{id: 18, name: "吴二十", age: 37},

{id: 19, name: "郑二十一", age: 38},

{id: 20, name: "李二十二", age: 39},

{id: 21, name: "张二十三", age: 40},

];

三、创建分页组件

我们将分页的组件封装在一个Vue组件内。在组件中，我们会设置一些属性和数据，计算页码并更新分页按钮。

1.设置组件属性和数据

Vue.component('pagination', {

props: {

currentPage: {

type: Number,

default: 1

},

pageSize: {

type: Number,

default: 10

},

total: {

type: Number,

default: 10

}

},

data: function() {

return {

pageCount: 0 // 总页数

}

}

});

在上面的代码中，我们定义了一个名为“pagination”的Vue组件，它接收三个属性：currentPage表示当前页码，pageSize表示每页的数据量，total表示总共有多少数据。同时，我们定义了一个数据属性pageCount用来存储总页数。

2.计算分页数和当前页码

computed: {

pageNums: function () {

var pageCount = this.pageCount;

var currentPage = this.currentPage;

var result = [];

if (pageCount <= 9) {

for (var i = 1; i <= pageCount; i++) {

result.push(i);

}

} else {

result.push(1);

if (currentPage > 4 && currentPage <= pageCount - 5) {

result.push('...');

for (var i = currentPage - 4; i <= currentPage + 4; i++) {

result.push(i);

}

result.push('...');

} else if (currentPage > pageCount - 5) {

result.push('...');

for (var i = pageCount - 8; i <= pageCount; i++) {

result.push(i);

}

} else {

for (var i = 2; i <= 9; i++) {

result.push(i);

}

result.push('...');

}

result.push(pageCount);

}

return result;

}

},

在上面的代码中，我们定义了一个计算属性pageNums，它计算出当前的页码按钮数组。我们首先需要计算出总页数，然后根据当前页码和总页数来计算页码按钮数组。

3.设置分页按钮

methods: {

setPage: function (pageNumber) {

if (pageNumber <= 0) {

pageNumber = 1;

} else if (pageNumber >= this.pageCount) {

pageNumber = this.pageCount;

}

this.currentPage = pageNumber;

this.$emit('page-changed', pageNumber);

},

},

template: '\

\

',

在上面的代码中，我们定义了一个名为“pagination”的Vue组件的模板。在这个模板中，我们展示了一个分页按钮组件。其中，我们使用了v-for指令来循环渲染页码按钮。

四、添加事件处理

为了实现我们的分页功能，我们需要监听分页按钮的点击事件，并根据用户的点击计算出页码并更新分页组件的状态。

1.监听分页按钮的点击事件

我们可以使用v-on指令来监听分页按钮的点击事件。在这里，我们定义了一个setPage方法来处理点击事件。

\

{{num}}\

...\

\

在上面的代码中，我们使用@click指令监听点击事件，并传递了num参数。当点击事件发生时，setPage方法会被调用并将当前页码设置为num。

2.计算页码

我们定义了一个setPage方法来处理分页按钮的点击事件。在这个方法中，我们计算出新的页码并更新组件状态。

methods: {

setPage: function (pageNumber) {

if (pageNumber <= 0) {

pageNumber = 1;

} else if (pageNumber >= this.pageCount) {

pageNumber = this.pageCount;

}

this.currentPage = pageNumber;

this.$emit('page-changed', pageNumber);

},

},

在setPage方法中，我们首先检查新计算出的页码是否超出限制范围，如果超出则修正为最大或最小值。然后，我们更新组件的状态，以便重新计算出页码顺序。

3.更新分页组件状态

为了更新分页组件的状态，我们需要使用Vue.js提供的$emit方法向父组件发出事件。

this.$emit('page-changed', pageNumber);

在上面的代码中，我们向父组件发出了一个名为“page-changed”的事件，并传递了当前页码。我们的父组件可以监听该事件并更新分页组件。

在最后，我们在父组件中使用“pagination”组件显示分页按钮。

\

如上，我们将“pagination”组件绑定到id为“app”的HTML元素上。我们并将当前的页码、每页数据量和总共的数据量分别传递给组件。同时，我们监听了一个名为“page-changed”的事件，该事件会在用户点击按钮时被触发。我们在pageChanged方法中更新数据源并重新渲染我们的Vue实例。