vue3给elementPlus中table设置自动滚动

实现效果

table滚动

首先是talbe部分，设置ref

      <el-table
        ref="reportTable"
        :data="tableData"
        style="width: 100%"
        height="150"
        size="small"
        :header-cell-style="{ background: 'rgb(2 40 58)', color: '#a5d2fd' }"
        :row-style="{ color: '#a5d2fd' }"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="cityName" label="乡镇" align="center" width=""></el-        
      table-column>
        <el-table-column
          prop="onlineCount"
          label="在线数量"
          align="center"
          width=""
        ></el-table-column>
        <el-table-column
          prop="offlineCount"
          label="离线数量"
          align="center"
          width=""
        ></el-table-column>
        <el-table-column prop="onlineRate" align="center" label="在线率">
          <template #default="scope"> {{ scope.row.onlineRate }}% </template>
        </el-table-column>
      </el-table>

然后是设置ref和定时器

<script setup>
    const reportTable = ref()
    function scrollUp() {
      nextTick(() => {
        const demo = reportTable.value.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]
        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.clientHeight + demo.scrollTop === demo.scrollHeight) {
              demo.scrollTop = 0
            }
          }
        }, 100)
      })
    }


    onMounted(() => {
      scrollUp()
    })
</script>

注意的点是：

1.获取的class,别的试了不大好使在我这里

const demo = reportTable.value.$refs.bodyWrapper.getElementsByClassName('el-scrollbar__wrap')[0]

2.得加nextTick(() => {}),等dom更新完成后在获取我代码中的demo，要不然可能会拿不到这个class,报错