vue+element-ui实现分页功能

element-ui的表格

 <el-table
	    ref="singleTable"
	    highlight-current-row
	    :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)"
		 v-show="isTable1"
	     style="width: 100%">
	     <el-table-column
	       prop="id"
	       label="#"
	      >
	     </el-table-column>
	     <el-table-column
	       prop="username"
	       label="姓名"
	      >
	     </el-table-column>
	     <el-table-column
	       prop="email"
		   label="邮箱"
	       >
	     </el-table-column>
		 <el-table-column
		   prop="mobile"
		   label="电话"
		   >
		 </el-table-column>
</el-table>

分页器代码

<el-pagination
	        @size-change="handleSizeChange"
	        @current-change="handleCurrentChange"
	        :page-sizes="[2]"
	        :page-size="pagesize"
	        layout="total, sizes, prev, pager, next, jumper"
	        :total="tableData.length"
	      ></el-pagination>

script的代码，还有return里面的代码: pagesize: 2, currpage: 1

handleSizeChange(page) {
		        this.pagesize = page;
},
//当前第几页
handleCurrentChange(page) {
		    this.currpage = page;
},