关于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是内部管制是否主动滚动

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理