element ui 表格滚动展示

<el-table
  ref="table"
  :data="tableData"
  :header-cell-style="getRowClass"
  max-height="248px"
  @mouseenter.native="mouseEnter"
  @mouseleave.native="mouseLeave"
>
    <el-table-column align="center" prop="entName" label="企业名称">
    </el-table-column>
    <el-table-column align="center" prop="type" label="企业分类">
    </el-table-column>
    <el-table-column align="center" prop="address" label="企业地址">
    </el-table-column>
</el-table>

在mounted中调用方法开始滚动

mounted() {
  this.autoRoll();
},

method

// 鼠标进入
mouseEnter() {
  // 鼠标进入停止滚动和切换的定时任务
  this.autoRoll(true);
},
// 鼠标离开
mouseLeave() {
  // 开启
  this.autoRoll();
},

autoRoll(stop) {
  const table = this.$refs.table;
  // 拿到表格中承载数据的div元素
  const divData = table.$refs.bodyWrapper;
  // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
  if (stop) {
    //再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
    window.clearInterval(this.rolltimer);
  } else {
    this.rolltimer = 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
      }
    }, 50); // 滚动速度
  }
}

文字轮播

安装组件

npm i vue-seamless-scroll --save

main.js引入并注册

import vueSeamlessScroll from 'vue-seamless-scroll'

Vue.use(vueSeamlessScroll)

组件作者github地址

https://github.com/chenxuan0000