用Vue.js实现element-ui表格实现自动滚动

最新推荐文章于 2024-03-28 14:23:03 发布

序·识鸣

最新推荐文章于 2024-03-28 14:23:03 发布

阅读量2.8k

点赞数 1

文章标签： vue.js ui javascript 前端框架

原文链接：https://blog.csdn.net/m0_49159526/article/details/115519424

版权

用Vue.js实现element-ui表格实现自动滚动

html这块重点是在表格定义ref，鼠标出入，还有表格固定高度height（很重要）

<template>
                <el-table
                        :data="tableData"
                        height="86%"
                        style="width: 100%"
                        highlight-current-row
                        ref="rolltable"
                        @mouseenter.native="stopScroll"
                        @mouseleave.native="startScroll"
                >
                    <el-table-column
                            prop="title"
                            label="标题"
                            width="520"
                    >
                        <template slot-scope="scope">
                            <div>
                                {{scope.row.title}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="releaseTime"
                            label="发布时间"
                            width="180">
                    </el-table-column>
                </el-table>
            </template>

在页面加载完后就启动滚动，所以在mounted里面调用滚动方法。

mounted(){
          this.tableScroll(false)
        },

这里是我的一些测试数据

        data() {
            return {
                tableData: [
                    {title:'111',releaseTime:'1'},  
                    {title:'111',releaseTime:'1'},  
                    {title:'111',releaseTime:'1'},  
                    {title:'111',releaseTime:'1'},  
                    {title:'111',releaseTime:'1'},  
                    {title:'111',releaseTime:'1'},  
                    {title:'111',releaseTime:'1'},  
                    {title:'111',releaseTime:'1'},  
                    {title:'111',releaseTime:'1'},  
                    {title:'111',releaseTime:'1'},  
                    {title:'111',releaseTime:'1'},  
                    {title:'111',releaseTime:'1'},  
                    {title:'111',releaseTime:'1'},  
                    {title:'111',releaseTime:'1'},
                ],
            };
        },

下面就是真正的方法了

        methods: {
            startScroll() {
                this.tableScroll(false);
            },

            stopScroll() {
                this.tableScroll(true);
            },

            //滚动方法
            tableScroll(stop) {
                if (stop) {
                    clearInterval(rolltimer)
                    return
                }
                const table = this.$refs.rolltable
                const divData = table.bodyWrapper
                rolltimer = setInterval(() => {
                    divData.scrollTop += 1
                    if (divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight) {
                        if (table.tableData.length > 5) {
                            divData.scrollTop = 0
                        }
                    }
                }, 35)

这篇文章主要借鉴了以下几个文章：
https://blog.csdn.net/YaRuu/article/details/124171779?spm=1001.2101.3001.6650.18&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-18-124171779-blog-123521578.pc_relevant_aa_2&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-18-124171779-blog-123521578.pc_relevant_aa_2&utm_relevant_index=18

https://blog.csdn.net/m0_49159526/article/details/115519424