Vue3 elmentUi table 自动滚动

 
   
const scrollTable = ref()
const scrollTimer = ref()
onMounted(() => {
  autoScroll(true)
})
// 表格自动轮播
const autoScroll = (isScroll) => {
  const table = scrollTable.value.layout.table.refs
  const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild

  //鼠标放上去,停止滚动;移开,继续滚动
  tableWrapper.addEventListener('mouseover', () => {
    isScroll = false
  })
  tableWrapper.addEventListener('mouseout', () => {
    isScroll = true
  })
  scrollTimer.value = setInterval(() => {
    if (isScroll) {
      tableWrapper.scrollTop += 1
      // 到达最后一行时从第一条继续
      if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight) {
        tableWrapper.scrollTop = 0
      }
    }
  }, 50)
}

onBeforeUnmount(() => {
  autoScroll(false)
})

HTML


        
        
        
 

你可能感兴趣的:(前端,javascript)