实现element-plus表格自动滚动

发表于 | 分类于 ，

项目可视化大屏中需要表格数据自动滚动，项目基于vue3 + element-plus，方法如下：

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
66
67

function useElTableScroll(dom, autoScrollFlag) {
  const scrollTop = ref(0)
  //内容高度
  const scrollHeight = ref(0)
  //滚动区域
  const scrollConHeight = ref(0)
  //定时器
  const timer = ref(null)
  //定时器
  const timerout = ref(null)
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
  //是否自动滚动
  const autoScroll = () => {
    if (!autoScrollFlag) {
      return false
    }
    timerout.value = setTimeout(() => {
      scrollConHeight.value = dom.value.$refs.bodyWrapper.clientHeight
      scrollHeight.value = dom.value.$refs.tableBody.clientHeight
      scrollStep()
    }, 3000)
  }
  //滚动添加
  function scrollStep() {
    scrollTop.value++
    if (
      scrollTop.value > scrollHeight.value - scrollConHeight.value &&
      scrollHeight.value > 0
    ) {
      timerout.value && clearTimeout(timerout.value)
      setTimeout(() => {
        scrollTop.value = 0
        dom.value.setScrollTop(scrollTop.value)
        autoScroll()
      }, 3000)
    } else {
      timer.value = requestAnimationFrame(scrollStep)
    }
    dom.value.setScrollTop(scrollTop.value)
  }
  //清除滚动
  function clearScroll() {
    timer.value && cancelAnimationFrame(timer.value)
    timerout.value && clearTimeout(timerout.value)
  }
  //鼠标进入
  function cellMouseEnter() {
    clearScroll()
  }
  //鼠标移出
  function cellMouseLeave() {
    scrollTop.value = dom.value.$el.querySelector(
      ".el-scrollbar__wrap"
    ).scrollTop
    autoScroll()
  }
  return {
    autoScroll,
    clearScroll,
    cellMouseEnter,
    cellMouseLeave
  }
}
export default useElTableScroll

setup中调用如下：

1
2
3
4
5
6
7
8
const table = ref(null)
const { autoScroll, clearScroll, cellMouseEnter, cellMouseLeave } = useElTableScroll(table, props.autoScroll)
onMounted(() => {
  autoScroll()
})
onUnmounted(() => {
  clearScroll()
})

props.autoScroll是外部控制是否自动滚动