乐趣区

关于element-plus:支持elementplus表格自动滚动

我的项目中须要表格数据主动滚动,我的项目基于 element-plus,办法如下:


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 中调用如下:

const table = ref(null)
const {autoScroll, clearScroll, cellMouseEnter, cellMouseLeave} = useElTableScroll(table, props.autoScroll)
onMounted(() => {autoScroll()
})
onUnmounted(() => {clearScroll()
})

props.autoScroll 是内部管制是否主动滚动

退出移动版