Vue2数据可视化大屏表格自动轮播。

* 需要用到Jquery

<template>
  <div>
    <div class="table-layout">
      <table class="scrollTable">
        <thead>
          <th>标题</th>
          <th>来源</th>
        </thead>
        <tbody>
          <tr v-for="item,index in dataInfo.items" :key="index">
            <td>
              <div class="normal-text">
                {{ item.name }}
              </div>
            </td>
            <td>
              <div class="normal-text">
                {{ item.source }}
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dataInfo: {
        page: 1,
        pageTotal: 3,
        total: 30,
        items: [
          { name: "中国教育国际交流协会职教分会2023年度会员大会在满洲里召开", source: "北京市教育委员会" },
          { name: "北京市教育委员会关于印发2023年北京职业教育与成人教育工作要点的通知", source: "北京市教育委员会" },
          { name: "北京市教委关于印发“十四五”时期北京市职业院校教师素质提高计划项目管理办法 （试行）", source: "北京市教育委员会" },
        ]
      },
      interval_1: null,
    }
  },
  mounted () {
    let that = this
    that.initScroll(that.$(".scrollTable tbody"), 'interval_1', 5000,) // 初始化轮播表格 （参数1：$dom对象、参数2：定时器、参数3、多少ms执行一次）
  },
  methods: {
    initScroll (node, interval, ms) {
      let that = this
      let height = node.height() // 滚动的高度（tbody高度）
      that[interval] = setInterval(function () {
        node.stop().animate({ // 1.先将tbody滚动到顶部看不见的地方
          bottom: height
        }, 600).promise().then(() => { // 2.执行完毕1后,将tbody置于底部看不见的地方（为了下一次从下往上的动画滚动）
          node.stop().animate({
            bottom: -height
          }, 0).promise().then(() => { // 3.执行完毕2后,请求的页码累加,请求数据,表格从下往上滚动
            if (that.dataInfo.page < that.dataInfo.pageTotal) {
              that.dataInfo.page++
            } else { // 如果请求到了最后一页,重置页码为1
              that.dataInfo.page = 1
            }
            console.log(`总页数: ${that.dataInfo.pageTotal},请求页码 => ${that.dataInfo.page}`); // 请求接口拿数据
            node.stop().animate({
              bottom: 0
            }, 500)
          })
        })
      }, ms)

    }
  },
  destroyed () {
    clearInterval(this.interval_1)
  }
}
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.table-layout {
  margin: 100px auto;
  width: 472px;
  height: 211px;
  border: 1px solid #ffffff;
  padding: 18px 20px 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.24) 0%,
    rgba(255, 255, 255, 0.24) 100%
  );
  box-shadow: 0px 0px 13px 0px rgba(42, 92, 254, 0.22),
    0px 37px 0px 0px rgba(4, 0, 0, 0),
    26px -27px 84px 0px rgba(255, 255, 255, 0),
    4px -4px 147px 0px rgba(55, 101, 254, 0);
  overflow: hidden;
  table {
    table-layout: fixed;
    overflow: hidden;
    width: 100%;
    border-collapse: collapse;
    thead {
      width: 100%;
      height: 34px;
      line-height: 34px;
      background: linear-gradient(90deg, #97d4ff 0%, #9ed9fe 100%);
      font-size: 14px;
      font-weight: bold;
      color: #0873be;
      position: relative;
      z-index: 10;
      th {
        text-align: left;
        padding-left: 8px;
      }
    }
    tbody {
      position: relative;
      bottom: 0;
      tr {
        &:not(:last-child) {
          border-bottom: 1px solid rgba(120, 140, 158, 0.12);
        }
        .normal-text {
          padding: 12px 8px;
          font-size: 14px;
          color: #535557;
          display: inline-block;
          max-width: 92%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>

最终效果视频：

vue2表格轮播