vue3表格循环滚动

依赖安装

"vue3-seamless-scroll": "^2.0.1",

import vue3SeamlessScroll from "vue3-seamless-scroll";

app.use(vue3SeamlessScroll)

注意：还需要安装elementplus

使用

<template>
  <div class="card_box">
    <el-table
        ref="reportTable"
        :data="tableData"
        style="width: 100%"
        height="170"
        size="small"
        :header-cell-style="{ background: 'rgb(2 40 58)', color: '#fff' }"
        :row-style="rowstyle"
    >
      <el-table-column prop="deviceCode" label="设备编号" />
      <el-table-column prop="alarmContent" label="告警内容" />
      <el-table-column prop="alarmTime" label="告警时间" />
    </el-table>
  </div>
</template>

<script setup lang="ts" name="righ3">
let tableData: any = ref([
  {
    deviceCode: '123456789',
    alarmContent: '张三',
    alarmTime: '2023-05-01'
  },
  {
    deviceCode: '123456789',
    alarmContent: '张三',
    alarmTime: '2023-05-01'
  },  {
    deviceCode: '123456789',
    alarmContent: '张三',
    alarmTime: '2023-05-01'
  },  {
    deviceCode: '123456789',
    alarmContent: '张三',
    alarmTime: '2023-05-01'
  },  {
    deviceCode: '123456789',
    alarmContent: '张三',
    alarmTime: '2023-05-01'
  },
])

const reportTable = ref()
function scrollUp() {
  nextTick(() => {
    const demo = reportTable.value?.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
    if (!demo) return
    const tableScroll = ref(true)
    demo.addEventListener('mouseover', () => {
      tableScroll.value = false
    })
    demo.addEventListener('mouseout', () => {
      tableScroll.value = true
    })
    setInterval(() => {
      if (tableScroll.value) {
        demo.scrollTop += 1
        if (demo.scrollTop + demo.clientHeight >= demo.scrollHeight) {
          demo.scrollTop = 0
        }
      }
    }, 100)
  })
}


const rowstyle = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return {
      backgroundColor: 'rgba(3, 76, 106, 1)',
    }
  }
}

onMounted(() => {
  scrollUp()
})

</script>
<style scoped lang="scss">
.card_box {
  width: 100%;
  height: 100%;
  background: rgba(135, 206, 250, 0.15);
  border-radius: 4px;
}

/*设置table的透明色*/
.el-table {
  --el-table-border-color: transparent;
  --el-table-border: none;
  --el-table-text-color: #bdbdbe;
  --el-table-header-text-color: #bdbdbe;
  --el-table-row-hover-bg-color: transparent;
  --el-table-current-row-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-expanded-cell-bg-color: transparent;
}
</style>