Bootstrap

已解决: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 = 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 距离也十分的小,尽可能让用户对视图的变化无感
;