解决 Vue3 Element-Plus ElTableV2 页面缓存切换 Tabs 后空白问题

Hello，各位好，上次完成了付款跟单工具没多久，就被调回总部参与企业数字化转型的项目了。为了方便快速构建起数字中台的基本框架，整个项目采用了 Fantastic-admin 作为数字中台的系统框架，其中需要展现大量的数据，因此将 ElTable 组件全部更换成了 ElTableV2。 虽然 Element-Plus 官方秉持谨慎发布的态度挂了 beta 标识，但实测下来对于我们的应用场景是够用的。

但是最近在集成鉴权和页面缓存的过程中发现，ElTableV2 在页面缓存切换 Tabs 的时候，出现了未渲染的情况(如下图)。从 TabName='权限项' 切换回 TabName='用户权限' 页面时，滚动条滚动之后的区域未能渲染。

在查资料的过程中发现，Github 中曾经有过相同经历的工程师提过类似的 Issue，但 Issue 直至关闭也没有解决问题。(传送门：[Component] [table-v2] table-v2第二次进入时，没有同步滚动条位置，需要再次滚动才能恢复 · Issue #18557 · element-plus/element-plus)

后面发现滚动条在触发的时候能够再次渲染，想着是不是可以通过事件来触发，结果没有在文档中找到对应的功能，然后又不想花太多时间去查这个组件的源码，想了一个投机取巧的办法——每次进入页面自动触发滚动事件

<script>
    import { ... type TableV2Instance } from 'element-plus'
    ...
    const TableDataListRef = ref<TableV2Instance>()
    const TableScrollTop = ref(0)
    function Table_Scroll(value: { scrollTop: number }) {
      TableScrollTop.value = value.scrollTop
    }
    onActivated(() => {
      // 解决 Element-Plus Table-V2 页面缓存后出现未正常渲染的问题
      TableDataListRef.value?.scrollToTop(TableScrollTop.value - 1)
      TableDataListRef.value?.scrollToTop(TableScrollTop.value + 1)
    })
</script>

<template>
  <div>
    ...
    <el-main style="padding: 20px 0;">
      <el-auto-resizer>
        <template #default="{ height, width }">
          <el-table-v2
              ref="TableDataListRef"
              v-loading="LoadingStatus"
              fixed
              :header-height="32"
              :row-height="32"
              style="font-size: 12px;" :columns="ColList" :data="DataList" :height="height" :width="width"
              @scroll="Table_Scroll" />
        </template>
      </el-auto-resizer>
    </el-main>
    ...
  </div>
</template>

然后就解决了...决了...了...

嗯，挺好的