Element循环滚动

最新推荐文章于 2024-07-02 16:03:36 发布
最新推荐文章于 2024-07-02 16:03:36 发布
阅读量496 收藏 8
点赞数 4
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41264896/article/details/138130436
版权
本文介绍了如何在Vue3中使用ElementUI的el-table组件实现数据列表的滚动功能，包括mouseover和mouseleave事件触发的滚动控制以及自定义列排序。
摘要由CSDN通过智能技术生成

Video_2024-04-23_161425

Vue3

<template>
    <el-table ref="myTable" height="250" @mouseover.native="clearScroll" @mouseleave.native="createScroll"
        :data="tableData">
        <el-table-column prop="Id" label="编号" :sortable="'custom'" />
        <el-table-column prop="Name" label="姓名" :sortable="'custom'" />
        <el-table-column prop="Gender" label="性别" :sortable="'custom'" />
        <el-table-column prop="IdCard" label="身份证号" :sortable="'custom'" />
        <el-table-column prop="Address" label="籍贯" :sortable="'custom'" />
    </el-table>
</template>
<script setup lang="js">
import { ref, onMounted, onUnmounted } from 'vue'
let tableData = ref([
    {
        "Name": "西门纽汪",
        "Gender": "女",
        "IdCard": "150622199311241915",
        "Address": "内蒙古自治区-鄂尔多斯市-准格尔旗",
        "Id": 1,
        "CreateUser": null,
        "CreateTime": null,
        "IsDeleted": null,
        "UpdateTime": null,
        "UpdateUser": null
    },
    {
        "Name": "冉眯流",
        "Gender": "男",
        "IdCard": "620122201301221619",
        "Address": "甘肃省-兰州市-皋兰县",
        "Id": 2,
        "CreateUser": null,
        "CreateTime": null,
        "IsDeleted": null,
        "UpdateTime": null,
        "UpdateUser": null
    },
    {
        "Name": "海喉拆屋",
        "Gender": "女",
        "IdCard": "522725201309211567",
        "Address": "贵州省-黔南布依族苗族自治州-瓮安县",
        "Id": 3,
        "CreateUser": null,
        "CreateTime": null,
        "IsDeleted": null,
        "UpdateTime": null,
        "UpdateUser": null
    },
    {
        "Name": "龚配旬",
        "Gender": "女",
        "IdCard": "610826201408131590",
        "Address": "陕西省-榆林市-绥德县",
        "Id": 4,
        "CreateUser": null,
        "CreateTime": null,
        "IsDeleted": null,
        "UpdateTime": null,
        "UpdateUser": null
    },
    {
        "Name": "巫马控絮",
        "Gender": "女",
        "IdCard": "530326200001031936",
        "Address": "云南省-曲靖市-会泽县",
        "Id": 5,
        "CreateUser": null,
        "CreateTime": null,
        "IsDeleted": null,
        "UpdateTime": null,
        "UpdateUser": null
    },
    {
        "Name": "常刃椒",
        "Gender": "女",
        "IdCard": "411671199505301393",
        "Address": "河南省-周口市-河南周口经济开发区",
        "Id": 16,
        "CreateUser": null,
        "CreateTime": null,
        "IsDeleted": null,
        "UpdateTime": null,
        "UpdateUser": null
    },
    {
        "Name": "羊舌性虫",
        "Gender": "男",
        "IdCard": "350213199004221307",
        "Address": "福建省-厦门市-翔安区",
        "Id": 17,
        "CreateUser": null,
        "CreateTime": null,
        "IsDeleted": null,
        "UpdateTime": null,
        "UpdateUser": null
    },
    {
        "Name": "太叔唉咳",
        "Gender": "男",
        "IdCard": "140222200504211555",
        "Address": "山西省-大同市-天镇县",
        "Id": 19,
        "CreateUser": null,
        "CreateTime": null,
        "IsDeleted": null,
        "UpdateTime": null,
        "UpdateUser": null
    },
    {
        "Name": "汲虚刚",
        "Gender": "男",
        "IdCard": "620981201601161438",
        "Address": "甘肃省-酒泉市-玉门市",
        "Id": 20,
        "CreateUser": null,
        "CreateTime": null,
        "IsDeleted": null,
        "UpdateTime": null,
        "UpdateUser": null
    },
    {
        "Name": "澹台另疤",
        "Gender": "女",
        "IdCard": "440981200906011864",
        "Address": "广东省-茂名市-高州市",
        "Id": 21,
        "CreateUser": null,
        "CreateTime": null,
        "IsDeleted": null,
        "UpdateTime": null,
        "UpdateUser": null
    }
])
let timer = null
let myTable = ref(null)

const clearScroll = () => {
    clearInterval(timer)
    timer = null
}
const createScroll = () => {
    clearScroll()
    // 拿到 table
    const table = myTable.value.layout.table.refs
    // 拿到可以滚动的元素
    const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild

    timer = setInterval(() => {
        tableWrapper.scrollTop += 1
        // 判断是否滚动到底部，如果到底部了置为0（可视高度+距离顶部=整个高度）
        if (tableWrapper.clientHeight + tableWrapper.scrollTop == tableWrapper.scrollHeight) {
            tableWrapper.scrollTop = 0
        }
    }, 100)
}

onMounted(() => {
    console.log(myTable.value)
    createScroll()
})
onUnmounted(() => {
    clearScroll()
})

</script>

vue2

<template>
    <div>
        <div class="app-container">
            <el-table v-loading="loading" :data="tableData" :max-height="250" ref="scroll_Table"
                @mouseenter.native="autoScroll(true)" @mouseleave.native="autoScroll(false)">
                <el-table-column prop="Id" label="编号" :sortable="'custom'" />
                <el-table-column prop="Name" label="姓名" :sortable="'custom'" />
                <el-table-column prop="Gender" label="性别" :sortable="'custom'" />
                <el-table-column prop="IdCard" label="身份证号" :sortable="'custom'" />
                <el-table-column prop="Address" label="籍贯" :sortable="'custom'" />
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            tableData: [
                {
                    "Name": "西门纽汪",
                    "Gender": "女",
                    "IdCard": "150622199311241915",
                    "Address": "内蒙古自治区-鄂尔多斯市-准格尔旗",
                    "Id": 1,
                    "CreateUser": null,
                    "CreateTime": null,
                    "IsDeleted": null,
                    "UpdateTime": null,
                    "UpdateUser": null
                },
                {
                    "Name": "冉眯流",
                    "Gender": "男",
                    "IdCard": "620122201301221619",
                    "Address": "甘肃省-兰州市-皋兰县",
                    "Id": 2,
                    "CreateUser": null,
                    "CreateTime": null,
                    "IsDeleted": null,
                    "UpdateTime": null,
                    "UpdateUser": null
                },
                {
                    "Name": "海喉拆屋",
                    "Gender": "女",
                    "IdCard": "522725201309211567",
                    "Address": "贵州省-黔南布依族苗族自治州-瓮安县",
                    "Id": 3,
                    "CreateUser": null,
                    "CreateTime": null,
                    "IsDeleted": null,
                    "UpdateTime": null,
                    "UpdateUser": null
                },
                {
                    "Name": "龚配旬",
                    "Gender": "女",
                    "IdCard": "610826201408131590",
                    "Address": "陕西省-榆林市-绥德县",
                    "Id": 4,
                    "CreateUser": null,
                    "CreateTime": null,
                    "IsDeleted": null,
                    "UpdateTime": null,
                    "UpdateUser": null
                },
                {
                    "Name": "巫马控絮",
                    "Gender": "女",
                    "IdCard": "530326200001031936",
                    "Address": "云南省-曲靖市-会泽县",
                    "Id": 5,
                    "CreateUser": null,
                    "CreateTime": null,
                    "IsDeleted": null,
                    "UpdateTime": null,
                    "UpdateUser": null
                },
                {
                    "Name": "常刃椒",
                    "Gender": "女",
                    "IdCard": "411671199505301393",
                    "Address": "河南省-周口市-河南周口经济开发区",
                    "Id": 16,
                    "CreateUser": null,
                    "CreateTime": null,
                    "IsDeleted": null,
                    "UpdateTime": null,
                    "UpdateUser": null
                },
                {
                    "Name": "羊舌性虫",
                    "Gender": "男",
                    "IdCard": "350213199004221307",
                    "Address": "福建省-厦门市-翔安区",
                    "Id": 17,
                    "CreateUser": null,
                    "CreateTime": null,
                    "IsDeleted": null,
                    "UpdateTime": null,
                    "UpdateUser": null
                },
                {
                    "Name": "太叔唉咳",
                    "Gender": "男",
                    "IdCard": "140222200504211555",
                    "Address": "山西省-大同市-天镇县",
                    "Id": 19,
                    "CreateUser": null,
                    "CreateTime": null,
                    "IsDeleted": null,
                    "UpdateTime": null,
                    "UpdateUser": null
                },
                {
                    "Name": "汲虚刚",
                    "Gender": "男",
                    "IdCard": "620981201601161438",
                    "Address": "甘肃省-酒泉市-玉门市",
                    "Id": 20,
                    "CreateUser": null,
                    "CreateTime": null,
                    "IsDeleted": null,
                    "UpdateTime": null,
                    "UpdateUser": null
                },
                {
                    "Name": "澹台另疤",
                    "Gender": "女",
                    "IdCard": "440981200906011864",
                    "Address": "广东省-茂名市-高州市",
                    "Id": 21,
                    "CreateUser": null,
                    "CreateTime": null,
                    "IsDeleted": null,
                    "UpdateTime": null,
                    "UpdateUser": null
                }
            ],
            scrolltimer: '', // 自动滚动的定时任务
        }
    },
    mounted() {
        console.log(this.$refs.scroll_Table)
        this.autoScroll()
    },
    beforeDestroy() {
        this.autoScroll(true)
    },
    methods: {
        // 设置自动滚动
        autoScroll(stop) {
            const table = this.$refs.scroll_Table.layout.table.refs
            // 拿到表格中承载数据的div元素
            const divData = table.bodyWrapper.firstElementChild.firstElementChild

            // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
            if (stop) {
                //再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
                window.clearInterval(this.scrolltimer)
            } else {
                this.scrolltimer = window.setInterval(() => {
                    // 元素自增距离顶部1像素
                    divData.scrollTop += 1
                    // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
                    if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
                        // 重置table距离顶部距离
                        divData.scrollTop = 0
                        // 重置table距离顶部距离。值=(滚动到底部时，距离顶部的大小) - 整个高度/2
                        // divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2
                    }
                }, 150) // 滚动速度
            }
        },
    }
};
</script>
三分藏道
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
table无限循环无缝滚动.zip
09-01
表格实现无限循环 无缝滚动 在做一些需求的时候可能会用到 像 一些新闻列表或是活动公告等 通过js 实现
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
10-17
主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
elementui el-table表格自动循环滚动
RYA1999的博客
06-03 334
elementui el-table表格自动循环滚动。
Element el-table 列表自动滚动
ALDNOAH_K的博客
12-20 2383
Element el-table 列表自动滚动
element-ui el-table表格自动循环滚动指令插件
最新发布
LWuXin的博客
07-02 612
这个 Vue 自定义指令为 el-table 实现自动滚动。指令接收 time（初始延迟时间）、speed（滚动速度）、loop（循环滚动）和 timeLoop（重置位置）等参数。在表体内容超出容器高度时自动启动滚动。鼠标进入表格区域时滚动暂停，离开时恢复。更新组件后重启滚动，解绑时清除定时器和事件监听。适用于需要自动滚动表格内容的场景。
elementui el-table表格自动循环滚动【超详细图解】
EFFY
03-12 4857
【代码】elementui el-table表格自动循环滚动【超详细图解】
el-table表格通过vue-seamless-scroll实现表格滚动(html + Vue + Element-UI)
weixin_42597632的博客
06-28 819
el-table表格滚动可以通过定义两个table实现，第一个table展示标题，第二个table展示滚动内容。把内容放在vue-seamless-scroll组件中即可。
el-table表格自动循环向上滚动鼠标放上去停止，移开恢复
前端程序媛_Ying博客
12-31 1675
el-table表格自动循环向上滚动鼠标放上去停止，移开恢复，排序的图标是两个图片，点击向后端发请求带不同的参数。
element plus table配合无限滚动加载
盼盼大小姐的博客
07-20 1139
【代码】element plus table配合无限滚动加载。
element的el-table中记录滚动条位置的示例代码
10-16
主要介绍了element的el-table中记录滚动条位置的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
表格循环滚动（elementui）、背景透明
03-04
在本文中，我们将深入探讨如何使用Element UI的Table组件实现表格循环滚动以及如何自定义设置背景为透明。Element UI是一款基于Vue.js的高质量UI组件库，它的Table组件提供了丰富的功能和自定义选项，使得在Web应用...
JS循环滚动频道首页幻灯片代码
12-15
在本项目中，"JS循环滚动频道首页幻灯片代码"是用于实现网页上频道首页的动态幻灯片效果，这种效果可以让用户在不手动操作的情况下自动播放一系列图片或内容，提升用户体验。 幻灯片组件通常包含以下几个核心部分：...
Div块上下左右循环滚动
09-07
【Div块上下左右循环滚动】是一种常见的网页动态效果，它可以使网页中的某个Div元素实现持续不断的循环滚动，增强用户体验和视觉吸引力。这种效果通常通过JavaScript和CSS技术来实现，尤其在现代网页设计中，...
简单的 vue基于elementui的无限滚动组件.txt
04-20
简单的 vue基于elementui的无限滚动组件，参数少。代码检简。请全局引入elementui。
vue el-table自动无限滚动
周家大小姐
05-23 2428
原先方案是用el-table-column插件来实现但发现在el-table-column的原理是copy原数据做为第二份数据中show-overflow-tooltip会失效,所以换了个JS写法。
ElementUi 表格自动滚动
LSFQ的博客
03-04 3921
elementui 表格自动滚动 elementui 表格背景透明、滚动条隐藏
el-table实现无限向下滚动懒加载数据
wlijun_0808的博客
12-07 4631
el-table实现无限向下滚动懒加载数据
vue项目使用el-table实现无限滚动
热门推荐
肖帅的博客
08-13 1万+
vue项目使用el-table实现无限滚动 案例如图所示，该案例是一个弹框内容 注意：属性可参考ElementUi中的InfiniteScroll 无限滚动，当数据不再继续请求接口时可用“infinite-scroll-disabled”属性判断是否继续加载 步骤如下： 1，前端安装“save el-table-infinite-scrol” cnpm install --save el-table-infinite-scroll 2，全局引用，在main.js中引用（vue3项目） import
element ui 循环表头
07-20
Element UI 的表格组件可以通过设置 `fixed` 属性来固定表头。具体来说，需要设置 `height` 属性为表格的高度，并将 `max-height` 属性设置为一个固定的值，这样当表格内容超出固定的高度时，会出现滚动条，但表头会保持固定不动。示例代码如下： ```html <el-table :data="tableData" style="width: 100%; height: 400px;" :max-height="400"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> <!-- 其他表格列 --> </el-table> ``` 在上述代码中，`height` 属性设置为 400px，`max-height` 属性也设置为 400，表示表格的高度为 400px，并且当内容超过 400px 时，会出现滚动条。同时，表格的表头会一直保持固定，不会随着表格内容的滚动而移动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值