当前位置: 首页 > article >正文

element plus的表格内容自动滚动

在这里插入图片描述

                        <el-table
                            :data="tableData"
                            ref="tableRef"
                            border
                            style="width: 100%"
                            height="150">
                            <el-table-column prop="date" label="名称" width="250" />
                            <el-table-column prop="name" label="订单数" width="180" />
                            <el-table-column
                                prop="address"
                                label="平均评分"
                                width="180" />
                        </el-table>
<script lang="ts" setup>
import { ref, onMounted } from "vue"
const tableRef = ref(null)
onMounted(() => {
    const tableBody = (tableRef as TypeAny).value.$refs.bodyWrapper
    const tableDom = tableBody.getElementsByClassName("el-scrollbar__wrap")[0]

    let isScroll = true
    tableDom.addEventListener("mouseover", () => {
        isScroll = false
    })
    tableDom.addEventListener("mouseout", () => {
        isScroll = true
    })
    setInterval(() => {
        if (isScroll) {
            tableDom.scrollTop += 1
            if (tableDom.clientHeight + tableDom.scrollTop == tableDom.scrollHeight) {
                tableDom.scrollTop = 0
            }
        }
    }, 150)
})
</script>

http://www.kler.cn/a/395482.html

相关文章:

  • 栈相关算法题1|通过栈判断链表是否对称|共享栈入栈出栈|括号匹配|多种括号配对|递归求序列最大值(C)
  • 【Java Web】Ajax 介绍及 jQuery 实现
  • 低代码牵手 AI 接口:开启智能化开发新征程
  • STM32中,不进行printf改写通过函数达到同款效果
  • 【LeetCode】【算法】581. 最短无序连续子数组
  • Cyberchef配合Wireshark提取并解析HTTP/TLS流量数据包中的文件
  • 基于ChatGPT 的人工智能代理挖掘化学文献的演变探索
  • 4.远程访问及控制
  • Pandas数据透视表:交叉分析与聚合计算
  • 民锋科技量化模型助力衍生品市场的智能化决策
  • 智谱AI清影升级:引领AI视频进入音效新时代
  • 力扣.15 三数之和 three-sum
  • 英语每日一句
  • 【3D Slicer】的小白入门使用指南一
  • 无人机遥控器基础讲解——CKESC电调小课堂08
  • 【计算机网络】设备如何监听 ARP 请求广播
  • 本地部署Apache Answer搭建高效的知识型社区并一键发布到公网流程
  • WebRTC实现双端音视频聊天(Vue3 + SpringBoot)
  • 创建游戏云存档功能的完整指南
  • 2025年开考科目有哪些?
  • PostgreSQL 批量执行脚本
  • 用OMS进行 OceanBase 租户间数据迁移的测评
  • 【复盘笔记】国考25一期_套题8
  • 【UGUI】Unity 游戏开发:背包系统初始化道具教程
  • Android系统设置页面更改语言 权限 主题导致app崩溃
  • labview实现功能性全局变量