已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
看到已经有人提了 issue（https://github.com/501351981/vue-office/issues/285）
官方暂时还没有回复，那就先自己手动加一个 切换sheet的重置 吧
核心代码
<script setup lang="ts">
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'const excelRef = ref()function errorHandler() {console.log('渲染失败')
}function renderedHandler() {console.log('渲染完成')// 修复插件bug：切换sheet 视图、滚动条高度未重置const ele = document.querySelector('.x-spreadsheet-menu')if (ele) {excelRef.value = eleele.addEventListener('click', resetScrollbar)}
}// 重置滚动条位置的函数
function resetScrollbar() {// 横向滚动条const scrollbarElementX = document.querySelector('.x-spreadsheet-scrollbar.horizontal')// 竖向滚动条const scrollbarElementY = document.querySelector('.x-spreadsheet-scrollbar.vertical')// 竖向重置到顶部if (scrollbarElementY) {// 这一个延时器先保证excel视图的正确渲染setTimeout(() => {scrollbarElementY.scrollTop = 1})// 这一个延时器再重置滚动条高度setTimeout(() => {scrollbarElementY.scrollTop = 0}, 10)}// 横向重置到左侧if (scrollbarElementX) {// 这一个延时器先保证excel视图的正确渲染setTimeout(() => {scrollbarElementX.scrollLeft = 1})// 这一个延时器再重置滚动条高度setTimeout(() => {scrollbarElementX.scrollLeft = 0}, 10)}
}onUnmounted(() => {if (excelRef.value) {excelRef.value.removeEventListener('click', resetScrollbar)}
})
</script><VueOfficeExcel:src="excelUrl"@rendered="renderedHandler"@error="errorHandler"
/>
- 如果直接将滚动条重置为0，会发现滚动条位置对了，但是试几次就发现
表格内容的位置没有重置，所以先让视图正确（移动到1的位置，触发内容变化），再重置为0 - 延时器的
时间差定的比较小，滚动条从1至0距离也十分的小，尽可能让用户对视图的变化无感