element分页例子

最新推荐文章于 2025-02-24 17:25:03 发布

土肥圆xulia

最新推荐文章于 2025-02-24 17:25:03 发布

阅读量4.5k

点赞数 1

分类专栏： vue element element分页

本文链接：https://blog.youkuaiyun.com/qq_39057641/article/details/83061640

版权

vue 同时被 3 个专栏收录

23 篇文章

订阅专栏

element

7 篇文章

订阅专栏

element分页

1 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码

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