分享一个公用的方法用来让el-table滚动到指定行的方法
Demo预览:
https://sunzsh.github.io/vue-demos/#/table-scroll-tr
代码:
https://github.com/sunzsh/vue-el-demo/blob/master/src/utils/elTableScrollToRow.js
https://github.com/sunzsh/vue-el-demo/blob/master/src/views/table-scroll-tr.vue
前两天写了一个这样批量导入的效果
那其他都还好
包括这个对勾啊还有这个等待效果
今天给大家分享一个可以让这个el-table
自动滚动到某一行的方法
然后呢顺便说一下它的实现思路呃
但是首先前提是
这个方法适用于这种固定高度的el-table
导致它里边在滚动
而不是整个el-table在页面里滚动哈
首先呢用的时候是这样把这个方法
import的导进来
在这里
然后呢我们调用这个方法传两个参数
第一个是
这个el-table的这个对象
我们可以用refs绑定
然后呢第二个参数
是我们要滚动到那一行的数据对象
就可以了
他会根据这个数据对象
找到他的第几行在这里边
那实现的思路其实也并不复杂
首先我们知道
这个滚动其实是一个大的table在一个
固定高度的div里边进行滚动
这个固定高度呢之前其实我们也提过
就是这个body Wrapper
就这个层
这个层大看它是201高度
但是里边有个table是1,488的高度
这个呢我们也可以通过这个layers来
验证哈这个layers之前我提过
大家如果找不到呢
在这
点这个more tools里边有layers把它打开
然后大家看
这个层现在就是
这个body wrappper
然后呢(我稍微把它放大一点啊)
我来滚动里边table
大家看
它其实就是
里边大的table在这个body wrapper里边滚动
所以我们也可以这样来试一下哈
我们先选中这个bodyWrapper
然后呢
我们用代码来控制一下它的scrollTop
比如说我们让它等于
大家看 就滚动了
但是呢它没有动画是不是
怎么加动画呢
这个之前我们也说过
我们可以用这个style点
scrollBehavior等于smooth
然后我们再来试一下让它等于
注意大家看 它就有动画了
那剩下的就好说了
我们就来计算它的高度值就好了
这是这个方法的全部代码啊
首先呢我们找到这个bodyWrapper
然后呢
通过这个数据对象找到它在第几行
找到了这个第几行其他的就好办了
我们就知道要滚动到什么位置了
只是呢我这加了一个判断
用来判断什么时候他才需要滚动
因为他有时候已经在这个范围内了
他就不需要滚动了
那最核心的滚动的位置就是这行代码
这行代码的逻辑其实也很简单哈
首先呢
这有一个
body wrapper
然后呢body Wrapper里边
有一个高高的table
然后其中有一行
就是我要滚动的那个位置
假设我们现在已经
滚动到那个具体的位置了
因为我想让它滚动完之后啊
它处于这个包的wrapper最下边
一会
我们来说滚动到上面那个更简单哈
比如说我想让他最终滚动完
这行就处在这个位置上
那我们最终要给这个scrollTop
设置的值是什么呢
就是
这个 对吧
这个的高度
所以呢我们可以这样
因为这个就是那个tr嘛
所以它的高度就可以用tr的
这一部分的高度这个就是offset top
然后呢去加上它自身的这个高度
就是这一块的高度
这样的话呢
我们就找到了整个这一块的高度
再去减去
中间这个bodyWrapper的高度
那最终对应起来呢
这就是tr.offsetTop
这块呢中间这个蓝色呢就是
tr.clientHeight
然后
然后呢减去的这一块就是
bodyWrapper.clientHeight
那如果最终想要的效果是滚动完
这行在这个bodyWrapper的最上面
其实更简单
我们直接
让它滚动到这个tr的offsetTop就行了
我们来试一下啊
大家看因为他在这个范围内的时候
他是不滚动的
我们也可以把这个判断去掉
我们再来试一下
大概就是这样的效果了
那这个代码呢
我会给它放到GitHub这个代码库里边
或者的话呢
大家记着这个1024bugs.com (访问不到就加www)
这个地址也可以
一会我会把这个demo和
代码的入口放在这里边
最后更新于
这有帮助吗?