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)
      }
    },
  }
}

你可能感兴趣的:(vue项目,vue.js,前端,javascript,elementui)