Javascriptvue. js table paging, ajax asynchronously load data

This article mainly introduces Javascriptvue. js table paging: ajax asynchronously loads data related information. If you need it, you can refer to the following pages for use with the table. The paging link is used as part of the table, it is reasonable to encapsulate the paging link into an independent component and embed it into the table component as a child component.

Effect:

Code:

1. Register a component

Js

Vue. component ('pagination', {template: '# paginationTpl', replace: true, props: ['cur', 'all', 'pagenum'], methods: {// page number Click Event btnClick: function (index) {if (index! = This. cur) {this. cur = index ;}}, watch: {"cur": function (val, oldVal) {this. $ dispatch ('page-to ', val) ;}, computed: {indexes: function () {var list = []; // calculate the left and right page numbers var mid = parseInt (this. pageNum/2); // The median value var left = Math. max (this. cur-mid, 1); var right = Math. max (this. cur + this. pageNum-mid-1, this. pageNum); if (right> this. all) {right = this. all} while (left <= right) {list. push (lef T); left ++;} return list;}, showLast: function () {return this. cur! = This. all ;}, showFirst: function () {return this. cur! = 1 ;}}});

Template: