[JavaScript知识库]Element + vue 分页实现

html 代码

	<div class="pagination">
	     <el-pagination
	         @size-change="handleSizeChange"   //对应js 中的动作
	         @current-change="handleCurrentChange"
	         :current-page="currentPage"   //当前页
	         :page-sizes="[10]"  		//分页数量 例如： [10，20，30]
	         :page-size="pageSize" 	//每页显示条数
	         layout="total,sizes,  prev, pager, next, jumper"
	         :total="total"> //总记录数
	     </el-pagination>
	  </div>

分页动作

//数据查询
tableListLoadData(){
this.loading = true;
this.$axios.post('/pm' + '/test/list', this.$qs.stringify(this.tableList.queryParams, {
	  							}))
	  					.then(res => {
							
	  							const data = res.data.resultData ;  //返回结果
								this.postList = data.list   //结果集赋值
	  							this.total = Number(data.totalCount);  //返回总数量
	  							this.loading = false;
	  						}).catch(error => {
	  							console.log(error);
	  							this.msgError("请求失败");
	  						})
	  			
	  			},


 handleSizeChange(val) {
                 thispageSize=val;
                    this.tableListLoadData();//获取的每页显示页面数量显示页面
              },
	 handleCurrentChange(val) {
		 thiscurrentPage = val;
		   this.tableListLoadData();//获取点击的当前页后刷新页面数据
	   },