基于vue的element框架table组件内容文字循环滚动

最新推荐文章于 2024-08-19 10:36:42 发布

小世界94

最新推荐文章于 2024-08-19 10:36:42 发布

阅读量2.4k

点赞数

分类专栏：前端项目中解决的问题 vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_25170255/article/details/121775063

版权

在Vue项目中，使用Element UI的table组件，本文介绍如何实现列表文字向上循环滚动的效果。通过给table设置ref，定义滚动方法操作div的scrollTop，并在页面加载时调用该方法，达到动态展示全部列表内容的目的。

摘要由CSDN通过智能技术生成

我们之前在做html中可能遇到过那种效果，就是列表文字向上循环滚动，以循环展示全部的列表文字内容，也是一个比较好看的动态效果

我们现在做vue项目的时候，基本上都用框架，那么我们如何实现这么一个列表文字向上滚动到效果，下面是实现方式，基于elementui的table组件。

1.正常引入element的table组件，给table命名一个ref，以便后面调用

2.定义一个循环滚动的方法，主要就是操作div的scrollTop

tableScroll: function () {
            this.$nextTick(() => {
                const divData =this.$refs.alarmMessage.bodyWrapper
                setInterval(() => {
                    divData.scrollTop += 1
                    if (divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight) {
                        divData.scro