Element table 组件自动滚动封装组件

准备工作

• npm install vue-seamless-scroll
• 然后再main.js 文件中引入下面的组件

main.js 文件:
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

//上面插件的版本  (仅供参考)
   "vue-seamless-scroll": "^1.1.23",

滚动组件

<template>
  <div class="main">
    <div
      class="content"
      ref="list"
      @mouseover="mouseOver"
      @mouseleave="mouseLeave"
    >
      <slot></slot>
    </div>
    <div class="occlude" v-show="isShowOcclude"></div>
  </div>
</template>

<script>
export default {
  // name: 'BackTopScroll',
  props: {
    // 定时器间隔
    lnterval: {
      type: Number,
      default: 80,
    },
    // 是否开启鼠标悬停stop
    hoverStop: {
      type: Boolean,
      default: true,
    },
    type: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      time: null,
      newTop: 0,
      isShowOcclude: false,
    }
  },
  methods: {
    initInterval() {
      let objele = null
      if (this.type === 'table') {
        let arr = this.$refs.list.getElementsByClassName('el-table')
        if (arr.length > 0) {
          objele = this.$refs.list
            .getElementsByClassName('el-table')[0]
            .getElementsByClassName('el-table__body-wrapper')[0]
        } else {
          objele = null
        }
      } else {
        objele = this.$refs.list
      }
      this.time = setInterval(() => {
        if (!objele) return
        // 获得老位置
        var oldTop = objele.scrollTop
        //得到新位置
        this.newTop = oldTop + 1
        //将计算的新位置进行赋值，使滚动条移动
        objele.scrollTop = this.newTop

        objele.animate({
          scrollTop: 0,
        })

        if (this.newTop + objele.clientHeight > objele.scrollHeight) {
          objele.scrollTop = 0
        }
      }, this.lnterval)
    },
    /**
     * 鼠标移入
     */
    mouseOver() {
      if (this.hoverStop) {
        clearInterval(this.time)
      } else {
        this.isShowOcclude = true
      }
    },
    /**
     * 鼠标离开
     */
    mouseLeave() {
      if (this.hoverStop) {
        this.initInterval()
      } else {
        this.isShowOcclude = true
      }
    },
  },
  mounted() {
    this.initInterval()
  },
  beforeDestroy() {
    clearInterval(this.time)
  },
}
</script>

<style lang="less" scoped>
.main {
  position: relative;
  width: 100%;
  height: 100%;
  .content {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    /deep/.el-table {
      .el-table__body-wrapper {
        tr td {
          .cell,
          .el-tooltip {
            user-select: text;
          }
        }
      }
    }
  }
  .occlude {
    width: 100%;
    height: 100%;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>

使用

在需要的组件中引入上面封装的组件,使用方法如下.

 <scroll-top :lnterval="80" :type="'table'">
                <el-table
                  :data="listData"
                  border
                  :show-header="status"
                  @row-click="click"
                  max-height="350"
                >
                  <el-table-column prop="date" label="日期"> </el-table-column>
                  <el-table-column prop="title" label="姓名"> </el-table-column>
                  <el-table-column prop="test" label="地址"></el-table-column>
                </el-table>
              </scroll-top>