您现在的位置是:网站首页> 编程资料编程资料
vue使用elementUI分页如何实现切换页面时返回页面顶部_vue.js_
2023-05-24
370人已围观
简介 vue使用elementUI分页如何实现切换页面时返回页面顶部_vue.js_
使用elementUI分页实现切换页面时返回页面顶部
原理
给elementUI分页组件的切换页面时触发事件(在这里就是handleCurrentChange函数)添加一个跳转到页顶的方法即可。
实现
//跳到页顶 scrollTop(selector) { let element = selector && document.querySelector(selector) || window; element.scrollTo(0, 0); }, handleCurrentChange(val) { ... this.scrollTop() }element-ui分页el-pagination的坑
1.所有的信息都必须的动态的
2.数据在data里面
pageNo: 1, pageSize: 10, pageSizesList: [10, 15, 20, 30, 50], tableData: [],//返回的结果集合 totalDataNumber: 0,//数据的总数,
3.这是重中之重,认真我的认证
this.$http({ method: 'POST', url: '/api/Acs/QueryAccessLog', data: requestData }).then(function (resp) { console.log(resp); if (resp.data.Data.Result.length > 0) { likeThis.tableData = resp.data.Data.Result; likeThis.totalDataNumber = resp.data.Data.Total; likeThis.listLoading=false; } else { likeThis.tableData = []; likeThis.totalDataNumber = 0; } })//改变每页显示数量 handleSizeChange(val){ var likeThis=this; var pageSize = `${val}`; this.pageNo=1 this.pageSize= parseInt(pageSize); console.log('pageSize: '+pageSize); this.$nextTick(() => this.getAndDraw(1,pageSize,function (resp) { likeThis.totalDataNumber = resp.data.Data.Total; }) ) }, //改变页码 handleCurrentChange(val){ var pageSize=this.pageSize; // this.pageNo=pageNo; console.log('pageSize:'+this.pageSize) this.getAndDraw(parseInt(pageNo),parseInt(pageSize)); },以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- vue项目input标签checkbox,change和click绑定事件的区别说明_vue.js_
- Vue3 实现网页背景水印功能的示例代码_vue.js_
- vue父子组件slot插槽的使用_vue.js_
- React构建简洁强大可扩展的前端项目架构_React_
- Vue弹窗的两种实现方式实例详解_vue.js_
- vue中@click绑定事件点击不生效的解决_vue.js_
- React Hook中useState更新延迟问题及解决_React_
- react使用useState修改对象或者数组的值无法改变视图的问题_React_
- vue-cli npm如何解决vue项目中缺失core-js的问题_vue.js_
- 详解React Fiber架构原理_React_
