vue3 + elementui table 设置自动滚动

原创已于 2023-06-27 15:25:53 修改 · 1.5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #前端

于 2023-06-25 16:54:22 首次发布

该代码示例展示了如何在Vue应用中创建一个表格，当鼠标不覆盖时，表格会自动定时滚动，而鼠标覆盖时滚动停止。通过`onMounted`钩子函数和`common.js`中的`scrollUp`方法，监听鼠标hover事件来控制滚动状态。表格数据存储在`tableData`中，`scrollUp`方法更新表格滚动条的位置。

定时器设置托条累加（鼠标覆盖时停止滚动）

<template>
    <el-table ref="reportTable" :data="tableData" height="500px">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" width="180" />
    </el-table>
</template>

<script>
import { ref, onMounted } from 'vue'
import common from '@/utils/common.js'
export default {
    setup(props) {
        const tableData = ref([
            {date: '2023-05-01', name: '1', address: '123'},
            {date: '2023-05-02', name: '2', address: '234'},
            {date: '2023-05-03', name: '3', address: '345'},
            {date: '2023-05-04', name: '4', address: '456'},
            {date: '2023-05-05', name: '5', address: '567'},
            {date: '2023-05-06', name: '6', address: '678'},
            {date: '2023-05-07', name: '7', address: '789'}
        ])
        const reportTable = ref()
        onMounted(() => {    
            nextTick(() => {
                common.scrollUp(reportTable.value)
            })
        })

        return {
            tableData,
            reportTable
        }
    }
}
</script>

utils文件夹下common.js

import { ref } from 'vue'

export default {
    scrollUp(tableRef) {
         const demo = tableRef.$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)
    }
}