已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确_vue-office打开excel滚动条挡住了表格

看到已经有人提了 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"
/>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

• 如果直接将滚动条重置为0，会发现滚动条位置对了，但是试几次就发现 表格内容的位置没有重置，所以先让视图正确（移动到1的位置，触发内容变化），再重置为0
• 延时器的 时间差 定的比较小，滚动条 从1至0 距离也十分的小，尽可能让用户对视图的变化无感