vue2使用element ui组件实现分页

vue2使用element ui组件实现分页,第1张

vue2使用element ui组件实现分页

在el_table组件的data属性中写入以下代码,shoplist为你的数据的变量名称

你数据的变量名称.slice((currentPage - 1) * pagesize,currentPage * pagesize)


使用分页器的组件

<div class="pag">
				<el-pagination
					layout="  prev, pager, next, sizes, jumper"//组件布局
					:page-sizes="[10]"//改变一页几条
					:page-size="pagesize"//每行显示条目个数
					:total="shoplist.length"//总数条目
					:current-page="currentPage"//当前页数
					@current-change="handleCurrentChange"//点击改变页数的事件
				/>
</div>


这个是放入data里的变量


改变当前页数事件
这个放入methods中

handleCurrentChange (val) {
			this.currentPage = val;
		}, //点击改变页数和数据

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1322976.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-12
下一篇 2022-06-12

发表评论

登录后才能评论

评论列表(0条)

保存