element的el-table中记录滚动条位置的示例代码

场景重现：在项目中使用了keep-alive来缓存组件，且使用element中的table列表，但在项目中是对table进行了二次封装，跟页码合在了一起。按照网上的直接对scrollTop赋值，赋值失败了，还要加上setTimeout才能成功，虽然实现了功能，但是不知道原因，可以的话希望有人能解答。

废话少说，直接赋上代码。

<template>
 <div class="table">
  <el-table ref="table">
  ...
  </el-table>
  <wp-pager @page-change="pageChange" :total="total" v-if="pager" v-bind="$attrs" v-on="$listeners"></wp-pager>
 </div>

</template>
<script>
 import { WpPager } from '../pager'

 export default {
  data() {
   return {
    scrollTop: null
   }
  },
  activated() {
   this.saveScroll()
  },
  mounted() {

  // 监听滚动条的位置
  this.$refs.table.bodyWrapper.addEventListener('scroll', (res) => {
    let height = res.target
    this.scrollTop = height.scrollTop
   },false)
  },

  beforeDestroy() {
   this.$refs.table.bodyWrapper.removeEventListener('scroll', (res) => {
    let height = res.target
    this.scrollTop = height.scrollTop
   },false)
  },

  methods: {
  // 当页码改变的时候滚动条重新到顶部
   pageChange (page) {
    this.$emit('page-change', page)
    this.scrollTop = 0
    this.saveScroll()
   },

// 这里如果直接赋值给this.$el.querySelector('.el-table__body-wrapper').scrollTop会失效，需要加上setTimeout才行。
   saveScroll() {
    this.$nextTick(()=> {
    setTimeout(() => {
     var scrollTop = this.$el.querySelector('.el-table__body-wrapper')
     scrollTop.scrollTop = this.scrollTop
     }, 13)
    })
   }
  }
 }
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Element-ui之ElScrollBar组件滚动条的使用方法

    在使用vue + element-ui 搭建后台管理页面的时候,做了一个头部.侧栏.面包屑固定的布局,导航栏和主要内容区域当内容超出时自动滚动. 使用的原因: 原来是采用优化浏览器样式的方式,对滚动条进行样式调整.但这个方法并不兼容火狐浏览器,在火狐访问时依然是浏览器默认的滚动条样式. .sidebar { position: fixed; border-right: 1px solid rgba(0,0,0,.07); overflow-y: auto; position: absolute;

  • element的el-table中记录滚动条位置的示例代码

    场景重现:在项目中使用了keep-alive来缓存组件,且使用element中的table列表,但在项目中是对table进行了二次封装,跟页码合在了一起.按照网上的直接对scrollTop赋值,赋值失败了,还要加上setTimeout才能成功,虽然实现了功能,但是不知道原因,可以的话希望有人能解答. 废话少说,直接赋上代码. <template> <div class="table"> <el-table ref="table">

  • vue-scroller记录滚动位置的示例代码

    问题描述: 列表页进入详情页,或者tab页切换,然后再返回列表页,希望能切换到之前滚动位置 解决问题思路: 切换到其他页面前记录位置,返回列表页的时候返回位置.这就需要借助vue-router的beforeRouteEnter和beforeRouteLeave这两个钩子去实现. 还有一种更简单粗暴的方法, vue-scroller.min.js源码中添加宽高不为零判断,实现方式见评论,是最近代码优化的时候发现的. 代码部分: beforeRouteEnter(to,from,next){ if(

  • layui 实现table翻页滚动条位置保持不变的例子

    最近使用了layui table但是发现了一系列问题,由于被封装过不好自己修改,比如翻页后滑动条每次都会复位,导致体验不好,通过调试,我发现layui table并没有给div加id标签,我通过class定位表格div位置. 可以看到 滚动条所在div class="layui-table-body layui-table-main" 我在layui table定义了一个父div,防止多个table时定位错误,先定位父div,再寻找内部的datatable <div class=

  • 记录滚动条位置（使用userdate）

    记录滚动条位置 dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd

  • 用js+cookie记录滚动条位置

    记录滚动条位置 dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd

  • 基于ElementUI中Table嵌套实现多选的示例代码

    基于ElementUI中Table嵌套实现多选的示例代码

    前言: 写这个是因为帮朋友修改项目中的bug 我也是第一次写这个功能,有不对的希望大家指正,如果看完有帮助点个赞! 代码中关键是js中Tree的路径查找这个核心,有不懂的自行百度 多了不说了,有需要的可以私信找我要代码,来看下我怎么实现的 思路: 从头开始看这个需求,我们需要知道用到哪写东西 1.表格Table 2.多选&全选 3.嵌套数据(下拉操作) 正好我们可以找下ElementUI官方文档 找到了我们需要用到的API 在嵌套数据的时候需要使用tree-props 选中数据的时候使用togg

  • vue3利用store实现记录滚动位置的示例

    vue3利用store实现记录滚动位置的示例

    目录 整体效果 监听容器滚动事件 store中的配置 在页面跳回时获取滚动位置 最后 整体效果 在首页列表进行滚动浏览时进入详情页后,切换回首页时可以定位到之前浏览的位置. 监听容器滚动事件 定义一个滚动事件,绑定到容器的滚动事件上,我这里做了一下节流 const savePosY = () => { if(state.timer) return; state.timer = setTimeout(() => { let node = document.querySelector("

  • 使用jQuery实现两个div中按钮互换位置的实例代码

    使用jQuery实现两个div中按钮互换位置的实例代码

    效果如下 代码如下: <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-2.1.0.js"></script> <script type="text/javascript"> $(function() { /

  • JQuery实现table中tr上移下移的示例(超简单)

    表格样式 <table> <tr> <td><input type="button" value="上移" onclick="moveUp(this)"/></td> <td><input type="button" value="下移" onclick="moveDown(this)"/></td

  • bootstrap table 多选框分页保留示例代码

    bootstrap table 多选框分页保留示例代码

    在使用bootstrap table的复选框功能的时候,由于采用服务端分页,当在第一页选择了某些数据,然后点击第二页选择一些数据,再次点回第一页,发现原先选择的数据已经清空了,原来的多选框并不支持翻页保留多选数据. 解决思路: 在分页的时候,吧原先选择的数据用一个全局变量保存,当再次翻页回来时,判断当前页数据是否存在于保存的数据数组中,存在则状态为选择.当然当取消选择的时候也要去删除数组中相应的数据. 为了解决这个问题,在查github上查文档发现有人提出了这个问题,并且作者wenzhixin

随机推荐