element分页例子

最新推荐文章于 2026-06-04 13:03:15 发布

原创最新推荐文章于 2026-06-04 13:03:15 发布 · 4.6k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

当前文章被收录于：

vue

23 篇文章 0 人学习

订阅专栏查看详情

element

当前文章被收录于：

element

7 篇文章 0 人学习

订阅专栏查看详情

element分页

当前文章被收录于：

element分页

1 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文详细介绍如何使用 Element UI 的分页组件实现前后端交互，包括分页参数的设置、与后端的数据交互以及响应页面变化的方法。通过具体代码示例，展示了如何将分页功能与 Axios 请求结合，实现动态数据加载。

代码

<div class="fenye">
		<el-pagination @current-change="current_change" :page="page" :page-size="pagesize" layout="prev, pager, next" :total="total">
	 </el-pagination>

data

total: 5, //默认数据总数	
page: 1,当前页码
pagesize: 5, //每页的数据条数

methods分页

created() {
	this.getnewslist();				
},		
methods: {
	getnewslist() {
		this.$axios({					
			url: APP.API.admin.ajax,
			method: 'post',
			data: this.fenyedata()//传分页参数到后台
		}).then(res => {
			this.tableData = res.data.rows;				
			this.total = res.data.total;	//取后台数据总条数						
		}).catch(err => {
			console.log(err)
		})
},

// 点击当前页触发

  current_change(val) {       				
   		this.page = val;
   		this.getnewslist();								     			
	},   	
  // 	分页参数的写法		      
  fenyedata() {
  		const postdata = new URLSearchParams();
  		postdata.append('pagesize', this.pagesize);
  		postdata.append('page', this.page);			
  		return postdata; 		
  	}