看到已经有人提了 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 = ele
ele.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
距离也十分的小,尽可能让用户对视图的变化无感