el-table在大屏展示无限滚动的应用

<template>
<el-table ref="scroll_Table"></el-table>
</template>

<script>
export default{

  mounted () {
    this.autoScroll()
  },

  beforeDestroy () { // 组件销毁时，关闭计时器
    this.autoScroll(true)
  },


methods: {
    // 设置自动滚动
    autoScroll (stop) {
      setTimeout(function () {
        const table = this.$refs.scroll_Table
        const divData = table.$refs.bodyWrapper // 这里是获取el-table的div
        if (stop) {
          //再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
          window.clearInterval(this.scrolltimer) // 关闭计时器
          console.log('关闭计时器')
        } else {
          this.scrolltimer = window.setInterval(() => {
            divData.scrollTop++ // 滚动条每次滚动一像素
            // console.log('divData.scrollTop', divData.scrollTop)
            if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
              divData.scrollTop = 0
            }
          }, 100) // 滚动速度
        }
      }.bind(this), 2000)
    },
}
}
<script>

2. 去掉右侧的滚动条

.el-table__body-wrapper {
    &::-webkit-scrollbar {
      width: 0; // 纵向滚动条的宽度
      background: rgba(213, 215, 220, 0.3);
      border: none;
    }
  }

::v-deep .el-table th.gutter {
  display: none;
  width: 0;
}
::v-deep .el-table colgroup col[name="gutter"] {
  display: none;
  width: 0;
}

3. 整体table表格的样式设计

<style lang="scss" scoped>
//修改表头字体颜色
::v-deep .el-table {
  // overflow: hidden;
  margin-top: 1.7rem;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1) !important;
  width: 100% !important;
  border-radius: 10px !important;
  .el-table__body-wrapper {
    &::-webkit-scrollbar {
      width: 0; // 纵向滚动条的宽度
      background: rgba(213, 215, 220, 0.3);
      border: none;
    }
  }
}
::v-deep .el-table th.gutter {
  display: none;
  width: 0;
}
::v-deep .el-table colgroup col[name="gutter"] {
  display: none;
  width: 0;
}
::v-deep .el-table__body {
  width: 100% !important;
}

::v-deep .el-table th {
  font-size: 1.2rem !important;
}

// 修改头部背景
::v-deep .el-table th {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border: none !important;
  text-align: center;
}
// 鼠标移入行变色
::v-deep .el-table tr:hover > td {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

// 修改奇数行颜色
::v-deep .el-table tr:nth-child(odd) {
  background-color: transparent !important;
  color: #fff !important;
}
::v-deep .el-table__body tr.current-row > td {
  background-color: rgba(255, 255, 255, 0.1) !important;
  width: 100%;
}
// 修改偶数行颜色
::v-deep .el-table tr:nth-child(even) {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}
</style>
  

4. 粗略的效果图