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

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

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

一、表头

<div class="header">
        <el-table ref="sortTable" @sort-change="sort_change" :default-sort="defaultSort" class="table-box" height="40">
          <el-table-column prop="boxId" width="60" label="序号"></el-table-column>
          <el-table-column
            prop="boxName"
            width="170"
            label="学区"
            v-if="query.dataType == 1"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="boxName"
            width="210"
            label="集团"
            v-if="query.dataType == 2"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column prop="schoolName" width="270" v-if="query.dataType == 3" label="学校"></el-table-column>
          <el-table-column :sortable="'custom'" prop="studentCount" label="在校人数"> </el-table-column>
          <el-table-column :sortable="'custom'" prop="faceStudentCount" label="注册人数"> </el-table-column>
          <el-table-column :sortable="'custom'" prop="beRunStudentCount" label="应跑人数"> </el-table-column>
          <el-table-column :sortable="'custom'" prop="runStudentCount" label="实跑人数"> </el-table-column>
          <el-table-column :sortable="'custom'" prop="runStudentPr" label="参与率(%)"> </el-table-column>
          <el-table-column :sortable="'custom'" prop="runStudentCr" label="达标率(%)"> </el-table-column>
          <el-table-column type="index" width="50" label="排名"> </el-table-column>
        </el-table>
      </div>

二、表格内容

<div class="tbodyBox" :style="{ height: tbodyHeight }">
        <vueSeamlessScroll
          :data="eventtableData"
          :class-option="classOption"
          class="levelSrcoll"
          @mousewheel.native="handleScroll"
          ref="vueSeamlessScroll"
          id="div"
        >
          <ul :class="'tbody'" v-for="(item, i) in eventtableData" :key="i">
            <li class="lineFeed center" style="width: 6%">{{ item.iindex }}</li>
            <!-- 学校 -->
            <li class="lineFeed schoolName" :style="style" :title="item.dataName">
              {{ item.dataName }}
            </li>
            <li class="lineFeed" :style="styleW">{{ item.studentCount || 0 }}</li>
            <li class="lineFeed" :style="styleW">{{ item.faceStudentCount || 0 }}</li>
            <li class="lineFeed" :style="styleW">{{ item.beRunStudentCount || 0 }}</li>
            <li class="lineFeed" :style="styleW">{{ item.runStudentCount || 0 }}</li>
            <li class="lineFeed" :style="styleW">{{ item.runStudentPr || 0 }}%</li>
            <li class="lineFeed" :style="styleW">{{ item.runStudentCr || 0 }}%</li>
            <li class="lineFeed" style="width: 6%">{{ item.irank || 0 }}</li>
          </ul>
        </vueSeamlessScroll>
      </div>

注意：表格内容这块也可以使用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)
      }
    },
  }
}