element-ui table组件滚动功能实现

在之前的文章中，我们已经回了如何使用vue-seamless-scroll实现自动无缝滚动+鼠标滚轮滚动。那如果使用element-ui中的table组件，我们该如何实现滚动呢？

首先我们需要两个表格，第一个表格我们只是使用表头，第二个表格我们隐藏表头并使用vue-seamless-scroll包裹实现滚动效果

一、表头

二、表格内容

        
          

            
{{ item.iindex }}
            
            

              {{ item.dataName }}
            
            
{{ item.studentCount || 0 }}
            
{{ item.faceStudentCount || 0 }}
            
{{ item.beRunStudentCount || 0 }}
            
{{ item.runStudentCount || 0 }}
            
{{ item.runStudentPr || 0 }}%
            
{{ item.runStudentCr || 0 }}%
            
{{ item.irank || 0 }}
          
        
      

注意：表格内容这块也可以使用element ui的table组件也可以用ul li。但是使用element ui的table组件时，要把表头隐藏，不然会出现两个表头。这里建议使用第二种方式，使用这种方式也不影响element ui 的排序功能（可以使用自带的排序，也可以使用自定义排序）等其他功能，因为排序时点击的是表头，触发函数也在表头。

三、滚动代码

import vueSeamlessScroll from 'vue-seamless-scroll'
export default{
  components: { vueSeamlessScroll },
  mounted() {
    this.$nextTick(() => {
      this.$refs.vueSeamlessScroll.reset()
    })
  },
  // 计算属性
  computed: {
    classOption() {
      return {
        step: 0.6, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
      }
    },
  },
  methods:{
    handleScroll(e) {
      // 改变组件内部 yPos 的值，这样html的translate(0, yPos)就会随之改变
      // e.deltaY是滚动的距离
      this.$refs.vueSeamlessScroll.yPos = this.$refs.vueSeamlessScroll.yPos - e.deltaY // 如果是正数 说明是往上滚
      if (this.$refs.vueSeamlessScroll.yPos > 0) {
        this.$refs.vueSeamlessScroll.yPos = 0
        return
      } // 如果yPos超过内部实际高度的一半则重新到顶部滚动 // 一半的原因是因为组件实际上创建了两个dom，以达到无缝衔接的效果
      if (Math.abs(this.$refs.vueSeamlessScroll.yPos) > document.getElementById('div').offsetHeight / 2 - 210) {
        this.$refs.vueSeamlessScroll.yPos = -(document.getElementById('div').offsetHeight / 2 - 210)
      }
    },
  }
}