element plus的表格内容自动滚动

时间:2024-11-16 10:10:15

在这里插入图片描述

                        <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>