vue react 表格及实时滚动

最新推荐文章于 2024-08-27 14:44:40 发布

王一花儿

最新推荐文章于 2024-08-27 14:44:40 发布

阅读量120

点赞数 2

文章标签： vue.js react.js javascript

本文链接：https://blog.csdn.net/Wangxiaomin_ddd/article/details/140261755

版权

vue: 使用ant-design-vue

     <div style="width:100%;height:100%;" @mouseleave="handleMouseOut" @mouseover="handleMouseOver">
            <a-table id="table_1" class="xy-table" :dataSource="dataSource" :columns="columns" :pagination="false"
              ref="tableContainer" :scroll="{ x: '100%', y: 234, scrollToFirstRowOnChange: true }"
              style="width: 100%;height: 88%; z-index: 30;" />
          </div>


.xy-table>thead {
  overflow: hidden;
  /* 高度需要计算出符合自己需求 */
  height: 480px;
  position: sticky;
  top: 0;
  z-index: 1;
}

设置定时器去监测鼠标滚轮变化

 startAutoScroll() {
      if (this.hover) {
        this.intervalId = setInterval(() => {
          // 滚动到底部
          this.$nextTick(() => {
            let container = this.$refs.tableContainer;
            container = document
              .getElementById('table_1')
              ?.getElementsByTagName('div')[0]
              ?.getElementsByTagName('div')[1];
            container.scrollTo({
              top: container.scrollTop + Number(46),
              behavior: 'smooth',
            });
            if (
              Math.ceil(container.scrollTop) >= Number(container.scrollHeight - container.clientHeight)
            ) {
              container.scrollTop = 0;
            }
          });
        }, 500);
      }
    },
    handleMouseOver() {
      this.hover = false;
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
      this.startAutoScroll();
    },
    handleMouseOut() {
      this.hover = true;
      this.startAutoScroll();
    },
    stopAutoScroll() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
    },