王磊的个人技术记录

<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>