奇葩需求之table组件滚动到第xx行后修改刷新数据后再次滚动到修改数据得位置

vue3+ant-design-vue   or   vue3+element
直接上代码
 

<template>  
  <a-table  
    ....   
  >  
    <!-- 表格内容 -->  
  </a-table>  
<a-button type="primary" @click="refresh()"> 刷新数据 </a-button>
</template>


<script lang="ts">
    import { ref, onMounted, onBeforeUnmount } from 'vue'

    const table = ref(null);
    const scrollSave = ref<number>(0)
    
    onMounted(() => {
		nextTick(()=>{
			const scroll = document.querySelector('.ant-table-body') //如果是element-ui或者element-plus类名换成.el-scrollbar__wrap就ok了
			scroll.addEventListener('scroll',handleScroll);
		})
	})
    onBeforeUnmount(() => { /* 解绑滚动监听 */
		const scroll = document.querySelector('.ant-table-body')//如果是element-ui或者element-plus类名换成.el-scrollbar__wrap就ok了
		scroll.removeEventListener('scroll',handleScroll);
	});

	const handleScroll = ()=>{ /** 滚动到底部刷新数据 */
		const scroll = document.querySelector('.ant-table-body')//如果是element-ui或者element-plus类名换成.el-scrollbar__wrap就ok了
		const { scrollTop } = scroll
		if(scrollTop == 0) return  //防止页面刷新数据重置scrollTop=0
		scrollSave.value = parseInt(scrollTop);
		
	}
    const refresh= ()=>{ 
        //省略请求步骤
        //请求完成后写
		nextTick(()=>{
			const scroll = document.querySelector('.ant-table-body')
    		if (scroll) {
    			scroll.scrollTo({
    				 top: scrollSave.value, // 指定位置的垂直偏移量
    				 behavior: 'smooth', // 平滑滚动
    			});
    		}
		})
	}
</script>