將所有數據在前臺進行分頁並支持檢索

分頁html

<el-pagination background v-show="filterTableData.length>15"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[15,30,50,100,500]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next"
  :total="totalSize" style="margin-top:5px;float:right">
</el-pagination>

注1：v-show="filterTableData.length>15
當數據大於15的時候進行分頁，這裏要跟最小的pageSize保持一致，否則可能會造成在需要分頁的時候沒有分頁

注2：handleSizeChange 當每頁數據量變化時觸發，如15->30

注3：handleCurrentChange 當頁碼改變時觸發

注4：currentPage 當前頁碼

注5：pageSize 每頁數據量

注6：totalSize filterTableData.length

js

變量定義

taskTableData : [],
filterTableData : [],
currentPage : 1,
pageSize    : 15,
// totalSize初始值沒啥用
totalSize   : 10

分頁相關方法

this.watch = {
   currentPage :function(){
	   let _data = this.filterTableData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize);
	   this.taskTableData = _data;
   },
   pageSize : function(){
	   let _data = this.filterTableData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize);
	   this.taskTableData = _data;
   },
   //filterTableData何時會改變
   //1--refreshTable
   //2--輸入框搜索
   filterTableData : function(){
	   this.totalSize = this.filterTableData.length;
	   this.currentPage =1;
	   let _data = this.filterTableData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize);
	   this.taskTableData = _data;
   },
},
this.methods = {
  handleSizeChange :function(size) {
		this.pageSize = size; 
	},
	handleCurrentChange:function(currentPage) {
		this.currentPage = currentPage; 
	},
	refreshTable:function(){
	    success 		
		_self.taskTableData = data;
		_self.filterTableData = data;
	}
}