vue滚动条,vue滚动条组件
关于 VUE EL-TABLE 记录分页、记录选中行、记录滚动条光标
一：首先 创建 el-table
el-table
ref="BaseTable"//设置 ref属性
:highlight-current-row="true"//高光选中行
:current-row-key="NowRowIndex"//行号
:row-class-name="tableRowClassName"//装载 EL-TABLE前执行的 方法 会遍历每一行 每一个单元格
@row-click="BaseRowClick"//添加行点击事件
二：添加 分页 组件 细节在于 :current-page.sync="currentPage" 不写这句 无效
el-pagination
:current-page.sync="currentPage"
layout="prev, pager, next"
@current-change="current_change"//选中页 改变事件
:total="total"//总行数
:page-count="AllPageCount"//总页数
:page-size="pagesize"//每页显示的行数
background
/el-pagination
三：current_change（）选中页 改变事件 记录当前选中的行号
current_change:function(currentPage){
this.currentPage = currentPage;
this.LastPageCount = currentPage
this.SetCreenRow(this.BaseInfoList[this.SelectDataIndex])
}
四：tableRowClassName（）方法，给EL-TABLE设置行号
tableRowClassName ({row, rowIndex}) {
row.row_index = rowIndex;
}
五：行点击事件
BaseRowClick(row, column, event){
this.NowRowIndex = row.row_index;//记录点击行的行号
this.NowSelectNum = row.SuppliesNum//记录行数据中的一个唯一键 以便 绑定 记录的选中行
//记录点击行时的 纵轴滚动条位置
let vmEl = this. el
const scrollParent = vmEl.querySelector('.el-table__body-wrapper')
this.Nowscroll = scrollParent.scrollTop
}
六：刷新列表的方法 内 绑定 之前 选中的 页码 行 及 滚动条位置
//选中 之前记录的 分页页码
this.current_change(this.LastPageCount);
//设置 滚动条到之前记录的位置 细节在于必须加 setTimeout 否则无效
setTimeout(() = {
this.$refs.BaseTable.bodyWrapper.scrollTop = this.Nowscroll
}, 13)
vue 制作pc页面跳转时 没有滚动条是怎么回事
首先在app.vue里面有这么一段 然后你所点击的按钮其实是这个东西，这个其实就是个封装完的a标签 你在router里面配置完了相关路由之后就能在点击这个按钮的时候将router-view标签里面的组件替换掉了
vue-scroller记录滚动位置的示例代码
问题描述:
列表页进入详情页，或者tab页切换，然后再返回列表页，希望能切换到之前滚动位置
解决问题思路:
切换到其他页面前记录位置，返回列表页的时候返回位置。这就需要借助vue-router的beforeRouteEnter和beforeRouteLeave这两个钩子去实现.
还有一种更简单粗暴的方法，
vue-scroller.min.js源码中添加宽高不为零判断，实现方式见评论，是最近代码优化的时候发现的。
代码部分:
beforeRouteEnter(to,from,next){
if(!sessionStorage.askPositon
||
from.path
==
'/'){//当前页面刷新不需要切换位置
sessionStorage.askPositon
=
'';
next();
}else{
next(vm
=
{
if(vm
vm.$refs.scrollerBottom){//通过vm实例访问this
setTimeout(function
()
{
vm.$refs.scrollerBottom.scrollTo(0,
sessionStorage.askPositon,
false);
},0)//同步转异步操作
}
})
}
},
beforeRouteLeave(to,from,next){//记录离开时的位置
sessionStorage.askPositon
=
this.$refs.scrollerBottom
this.$refs.scrollerBottom.getPosition()
this.$refs.scrollerBottom.getPosition().top;
next()
},
需要注意的点:
1.熟悉vue-router和vue-scroller的api
2.beforeRouteEnter的时候，是无法通过this去访问vue实例的，需要借助于vm
3.setTimeout
的使用
等下周发版的时候，我贴上链接，可以体验下效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:详解使用vue-router进行页面切换时滚动条位置与滚动监听事件解决Vue页面固定滚动位置的处理办法vue实现某元素吸顶或固定位置显示（监听滚动事件）