vue.js表格分页示例

效果展示：

代码详解：

1. 注册组件：

我们首先创建一个名为'pagination'的Vue组件。这个组件负责显示页码，并响应用户的点击事件。

```javascript

Vueponent('pagination', {

template: 'paginationTpl',

replace: true,

props: ['cur', 'all', 'pageNum'],

methods: {

// 当用户点击某个页码时

btnClick: function(index) {

if (index != this.cur) {

this.cur = index;

}

}

},

watch: {

"cur" (val) {

this.$dispatch('page-to', val); // 当当前页码改变时，触发一个自定义事件

}

},

computed: {

// 计算要显示的页码（根据当前页码、总页码数和每页显示的数目）

indexes() {

let list = [];

const mid = parseInt(this.pageNum / 2); // 中间值

const left = Math.max(this.cur - mid, 1);

const right = Math.max(this.cur + this.pageNum - mid - 1, this.pageNum);

if (right > this.all) { right = this.all; } // 确保不超过总页数

while (left <= right) {

list.push(left);

left++;

}

return list; // 返回要显示的页码列表

},

// 其他计算属性...（如是否显示首页、尾页等）

}

});

```

模板部分：对应的HTML模板如下，负责渲染具体的页码和样式。这里使用了`