vue缓存table滚动条位置

在Vue中，要缓存table滚动条的位置，你可以使用以下步骤：

1. 首先，在Vue的data中定义一个变量，用于存储滚动条的位置，比如scrollPosition。

2. 在table元素上添加一个scroll事件监听器，当滚动事件触发时，将滚动条的位置更新到scrollPosition中。

3. 在Vue的生命周期钩子函数中，比如created或mounted中，通过获取缓存中的滚动条位置，并将其赋值给scrollPosition。

4. 在Vue的updated钩子函数中，将scrollPosition中存储的滚动条位置重新应用到table元素上，以恢复滚动条的位置。

下面是一个示例代码：

<template>
  <div>
    <table ref="table" @scroll="saveScrollPosition">
      <!-- 表格内容 -->
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollPosition: 0
    }
  },
  created() {
    // 从缓存中获取滚动条位置，并赋值给scrollPosition
    this.scrollPosition = localStorage.getItem('scrollPosition')
  },
  mounted() {
    // 应用滚动条位置到table元素上
    this.$refs.table.scrollTop = this.scrollPosition
  },
  updated() {
    // 更新滚动条位置
    this.$refs.table.scrollTop = this.scrollPosition
  },
  methods: {
    saveScrollPosition() {
      // 监听滚动事件，并将滚动条位置保存到scrollPosition中
      this.scrollPosition = this.$refs.table.scrollTop
      // 将滚动条位置保存到缓存中
      localStorage.setItem('scrollPosition', this.scrollPosition)
    }
  }
}
</script>

在这个示例中，我们使用localStorage来保存滚动条位置，以便在页面刷新或重新加载后能够恢复滚动条位置。你也可以使用其他方式来存储和读取滚动条位置，比如vuex或cookie等。