vue 页面内实现el-table和div自动滚动

天天向上10242026-03-14 16:47
html 复制代码
<template>
    <div>
        <div>el-table自动滚动</div>
        <el-table
                  ref="tableListWrapper"
                  :data="tableData"
                  height="315"
                  >
            <el-table-column type="index" label="序号" width="40" align="center"></el-table-column>
            <el-table-column prop="deviceName" label="名称" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column prop="status" label="状态" show-overflow-tooltip align="center"></el-table-column>
        </el-table>

        <div>普通div自动滚动</div>
        <div class="divBox" ref="divListWrapper" @mouseenter="handleListMouseEnter" @mouseleave="handleListMouseLeave">
            <div v-for="(item, index) in list2" :key="index" class="item"> {{item.name}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [],
                list2: [],
                scrollInterval: null,
                scrollTableInterval: null,
            }
        },
        mounted() {
            this.startAutoScroll()
            this.startTableAutoScroll()
        },
        beforeDestroy() {
            this.stopAutoScroll()
            this.stopTableAutoScroll()
        },
        methods: {
            handlemapmouseenter() {
                this.stopAutoScroll()
                this.stopTableAutoScroll()
            },
            handlemapmouseleave() {
                this.startAutoScroll()
                this.startTableAutoScroll()
            },
            handleListMouseEnter() {
                this.stopAutoScroll()
            },
            handleListMouseLeave() {
                this.startAutoScroll()
            },
            startAutoScroll() {
                if (this.scrollInterval) {
                    return
                }
                this.scrollInterval = setInterval(() => {
                    if (this.$refs.divListWrapper) {
                        const wrapper = this.$refs.divListWrapper
                        if (wrapper) {
                            wrapper.scrollTop += 1
                            if (wrapper.scrollTop + wrapper.clientHeight >= wrapper.scrollHeight) {
                                wrapper.scrollTop = 0
                            }
                        }
                    }
                }, 50)
            },
            // 停止自动滚动
            stopAutoScroll() {
                if (this.scrollInterval) {
                    clearInterval(this.scrollInterval)
                    this.scrollInterval = null
                }
            },
            ////////////////////
            startTableAutoScroll() {
                if (this.scrollTableInterval) {
                    return
                }
                const scrollWrap = this.$refs.tableListWrapper.$el.querySelector('.el-table__body-wrapper')

                scrollWrap.addEventListener('mouseenter', this.stopTableAutoScroll)
                scrollWrap.addEventListener('mouseleave', this.startTableAutoScroll)

                this.scrollTableInterval = setInterval(() => {
                    if (scrollWrap) {
                        const wrapper = scrollWrap
                        if (wrapper) {
                            wrapper.scrollTop += 1
                            if (wrapper.scrollTop + wrapper.clientHeight >= wrapper.scrollHeight) {
                                wrapper.scrollTop = 0
                            }
                        }
                    }
                }, 50)
            },
            // 停止自动滚动
            stopTableAutoScroll() {
                if (this.scrollTableInterval) {
                    clearInterval(this.scrollTableInterval)
                    this.scrollTableInterval = null
                }
            },
        },
    }
</script>