a-table 刷新页面后滚动条位置保持不变

antd+vue，表格编辑数据，失去焦点时保存数据，并刷新表格，希望实现刷新表格后水平滚动条保持在刷新前的位置不变，请问该如何实现？麻烦看下以下代码，目前是没有效果的

主体代码如下： 
mounted() {
    this.$refs.table.$el.querySelector('.ant-table-body').addEventListener('scroll', this.onScrollHandle)
  },
methods: {
    onScrollHandle(tableRef) {
      this.offsetLeft = tableRef.target.scrollLeft
    },
    // 刷新表格
    refreshTable() {
      this.$refs.table.refresh()
      if (this.offsetLeft) {
        this.savescroll()
      }
    },
    // 页面刷新后设置当前滚动的位置
    savescroll() {
      this.$nextTick(() => {
        setTimeout(() => {
          let scroll = this.$refs.table.$el.querySelector('.ant-table-body')
          scroll.scrollLeft = this.offsetLeft
        }, 10)
      })
    },
}

1. 监听编辑表格的失去焦点事件，在事件触发时保存数据。
2. 刷新表格数据。
3. 在刷新表格后，获取当前水平滚动条的位置。
4. 使用表格组件的方法设置水平滚动条的位置。
   具体代码如下所示：
   ```vue

```

滚动条位置存到localStorage里

• 建议你看下这篇博客👉 ：Antd of vue的table增加最后一行的统计行，统计行控制宽高
• 除此之外, 这篇博客: antd vue实现table的分页组件固定位置的效果中的 实现步骤 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• //隐藏默认的分页
  //:scroll="{ y: tableHeight, x: 1000 }" 自动计算表格的相对高度
   <!-- {{ tableHeight }} -->
      <a-table ref="tableRef" :loading="loading" rowKey="id" :columns="columns" :data-source="tableData"
          :scroll="{ y: tableHeight, x: 1000 }" :pagination="false" bordered :row-selection="rowSelection">
          <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'action'">
                  <span>
                      <a-button type="link" @click="editeHandle(record.id)" :disabled="record.isEdite">编辑</a-button>
                      <a-divider type="vertical" />
                      <!-- <a @click="delHandle(record.id,1)">删除</a>
                           -->
                      <a-popconfirm title="确定删除这条数据吗?" :disabled="record.isEdite" ok-text="确认" cancel-text="取消"
                          @confirm="delHandle(record.id)" @cancel="cancel">
                          <a-button type="link" href="#" :disabled="record.isEdite">删除</a-button>
                      </a-popconfirm>
                      <a-divider type="vertical" />
                      <a-button type="link" @click="getDetail(record.id)">
                          查看详情
                      </a-button>
                  </span>
              </template>
          </template>
      </a-table>
      <div class="footer-p">
          <a-pagination v-bind="pagination" @change="handleTableChangePage" :showSizeChange="handleSizeChange" />
      </div>
  

  js部分
  utils.js

  export const calculateHeight = (ele) => {
  //window.innerHeight 可视区的高度
  //document.getElementsByTagName(ele)[0].getBoundingClientRect().top 当前元素距离顶部的高度
  //220 底部版权区域的高度，可根据实际需求去改变
    return window.innerHeight - document.getElementsByTagName(ele)[0].getBoundingClientRect().top - 220
  }
  

  import { calculateHeight } from '@/utils/utils'
  const state = reactive({
  tableHeight :0
  })
  onMounted(() => {
  	//dom加载完毕后再计算高度
      nextTick(() => {
          state.tableHeight = calculateHeight('table')
      })
      //敞口改变大小的时候计算高度，并且加了防抖效果
      window.addEventListener('resize', debounce(() => {
          state.tableHeight = calculateHeight('table')
      }), false)
  })