element的el-table中記錄滾動(dòng)條位置的示例代碼

更新時(shí)間：2019年11月06日 09:40:45 作者：小小小華

這篇文章主要介紹了element的el-table中記錄滾動(dòng)條位置的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

場(chǎng)景重現(xiàn)：在項(xiàng)目中使用了keep-alive來(lái)緩存組件，且使用element中的table列表，但在項(xiàng)目中是對(duì)table進(jìn)行了二次封裝，跟頁(yè)碼合在了一起。按照網(wǎng)上的直接對(duì)scrollTop賦值，賦值失敗了，還要加上setTimeout才能成功，雖然實(shí)現(xiàn)了功能，但是不知道原因，可以的話希望有人能解答。

廢話少說(shuō)，直接賦上代碼。

<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() {
   
  // 監(jiān)聽(tīng)滾動(dòng)條的位置 
  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: {
  // 當(dāng)頁(yè)碼改變的時(shí)候滾動(dòng)條重新到頂部
   pageChange (page) {
    this.$emit('page-change', page)
    this.scrollTop = 0
    this.saveScroll()
   },

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue 使用monaco實(shí)現(xiàn)代碼高亮
這篇文章主要介紹了vue 使用monaco實(shí)現(xiàn)代碼高亮的方法，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-03-03
關(guān)于Vue?監(jiān)控?cái)?shù)組的問(wèn)題
這篇文章主要介紹了Vue?監(jiān)控?cái)?shù)組的示例,主要包括Vue?是如何追蹤數(shù)據(jù)發(fā)生變化，Vue?如何更新數(shù)組以及為什么有些數(shù)組的數(shù)據(jù)變更不能被?Vue?監(jiān)測(cè)到，對(duì)vue監(jiān)控?cái)?shù)組知識(shí)是面試比較常見(jiàn)的問(wèn)題，感興趣的朋友一起看看吧
2022-05-05
vue實(shí)現(xiàn)設(shè)置載入動(dòng)畫(huà)和初始化頁(yè)面動(dòng)畫(huà)效果
今天小編就為大家分享一篇vue實(shí)現(xiàn)設(shè)置載入動(dòng)畫(huà)和初始化頁(yè)面動(dòng)畫(huà)效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
vue使用swiper實(shí)現(xiàn)左右滑動(dòng)切換圖片
這篇文章主要為大家詳細(xì)介紹了vue使用swiper實(shí)現(xiàn)左右滑動(dòng)切換圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-10-10
vue如何利用axios調(diào)用后臺(tái)api接口
這篇文章主要介紹了vue如何利用axios調(diào)用后臺(tái)api接口問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
深入淺析vue全局環(huán)境變量和模式
這篇文章主要介紹了vue全局環(huán)境變量和模式的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-04-04
vue axios數(shù)據(jù)請(qǐng)求及vue中使用axios的方法
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，在vue中數(shù)據(jù)請(qǐng)求需要先安裝axios。這篇文章主要介紹了vue axios數(shù)據(jù)請(qǐng)求及vue中使用axios的方法,需要的朋友可以參考下
2018-09-09
elementplus?card?懸浮菜單的實(shí)現(xiàn)
本文主要介紹了elementplus?card?懸浮菜單的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
vue實(shí)現(xiàn)表單驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表單驗(yàn)證功能，基于NUXT的validate方法實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
vue打包后dist目錄下的index.html網(wǎng)頁(yè)顯示空白的問(wèn)題(兩種方案)
本文主要介紹了vue打包后dist目錄下的index.html網(wǎng)頁(yè)顯示空白的問(wèn)題,主要介紹了兩種方式,具有一定的參考價(jià)值,感興趣的可以了解一下
2023-11-11