将所有数据在前台进行分页并支持检索

分页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;
	}
}