element ui的表格滚动效果

需求

使用element ui的table组件实现表格数据垂直网上滚动的效果，同时实现自定义表头事件

介绍

table事件：
cell-mouse-enter 当单元格 hover 进入时会触发该事件
cell-mouse-leave 当单元格 hover 退出时会触发该事件
@mouseenter.native=“handleMouse” 当table hover 进入时会触发该事件
@mouseleave.native=“handleMouseLeve” 当table hover 退出时会触发该事件

实现

<el-table height="830" ref="table" v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row @mouseenter.native="handleMouse" @mouseleave.native="handleMouseLeve">
 <!-- 一级表头 -->
 <el-table-column label="姓名" width="110" align="center" v-if="table_view">
 <!-- 二级表头 -->
        <el-table-column align="center">
         <!-- slot="header"自定义二级表头 -->
          <template slot="header">        
            <span @click="updateName(user.nickname)" v-html="user.nickname"></span>
          </template>
          <!-- slot-scope="scope"表数据 -->
          <template slot-scope="scope">
            <div :class="scope.row.name" class="cricle"></div>
          </template>
        </el-table-column>
      </el-table-column>
</el-table>

export default {
data() {
    return {
      list: [],
      scroll_list: [],
      user: {},
      table_view: false,
      scroll_time: null,
      table: undefined,
      divData: undefined,
    }
  },
 mounted() {
    // 拿到表格挂载后的真实DOM（挂载之前拿不到data数据，所以table中的数据列先通过if条件隐藏table_view=false）
    this.table = this.$refs.table;
    // 拿到表格中承载数据的div元素
    this.divData = this.table.bodyWrapper;
  },
  beforeDestroy() {
    if (this.scroll_time) {
      clearInterval(this.scroll_time)
    }
  },
   methods: {
    startScroll() {
      let _this = this
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      _this.scroll_time = setInterval(() => {
        // 元素自增距离顶部1像素
        _this.divData.scrollTop += 1
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (_this.divData.clientHeight + _this.divData.scrollTop == _this.divData.scrollHeight) {
          // 重置table距离顶部距离
          // divData.scrollTop = 0;
          _this.list = [..._this.list, ..._this.scroll_list]
        }
      }, 30);  // 滚动速度
    },
      clearList() {
      this.table_view = false
      this.list = []
      this.scroll_list = []
    },
     getList() {
      console.log('执行getlist')
      this.listLoading = true
      this.clearList()
      lists().then(response => {
          this.list = response.data.list
          this.scroll_list = response.data.list
          this.user = response.data.user
          if (this.list !== undefined && this.list !== null && this.list.length > 0) this.table_view = true
          this.handleMouse()
          if (response.data.list && response.data.list.length > 1 &&!this.scroll_time) {
          	this.startScroll()
         }
      })
    },
     handleMouse() {
      if (this.scroll_time) {
        clearInterval(this.scroll_time)
      }
      console.log('鼠标进入')
    },
    handleMouseLeve() {
      if (this.list.length > 1) {
        this.startScroll()
      }
      console.log('鼠标离开')
    },
    
}
}

Video_2023-02-23_104713