echarts表格列表自动滚动

1.参考文档https://blog.csdn.net/weixin_45503820/article/details/120286575

<div class="column-right-one">
        <p class="title">
          <img src="../img/title_arrow.png" alt="">
          <span class="people">人员详情</span>
        </p>
        <div class="people-detail">
          <div class="results-li">
            <span class="num1">姓名</span>
            <span class="num2">部门</span>
            <span class="num3">状态</span>
            <span class="num4">联系方式</span>
          </div>
          <!-- <ul class="results-scroll" style="overflow:auto;height:2.4rem"> -->
          <!-- <el-scrollbar style="height:100%"> -->
          <!-- '01'-在职 '02'-外借 03-调离 04-退休 05-离职 06-长病假 -->
          <!-- <vueSeamlessScroll :data="staffDetailList" class="results-scroll" :class-option="optionCustomer">
            <li class="results-li2" :class="current==index?'active':''" @mouseover="handlemouseOver(index)" @mouseleave="handlemouseleave(index)" v-for="(item,index) in staffDetailList" :key="item.userId">
              <span class="num1">{{item.fullName}}</span>
              <span class="num2">{{item.orgName}}</span>

              <span class="num3 " :class="item.status=='01'?'onjob':item.status=='02'?'borrow':item.status=='03'?'transfer':item.status=='04'?'retire':item.status=='05'?'leave':item.status=='06'?'sick':'onjob'">{{item.status | filt(statusArr)}}</span>
              <span class="num4">{{item.mobile}}</span>
            </li>

          </vueSeamlessScroll> -->
          <!-- '01'-在职 '02'-外借 03-调离 04-退休 05-离职 06-长病假 -->
          <div class="results-scroll" v-if="staffDetailList.length > 0">
            <autoScroll>
              <template #forwardContent>
                <li class="results-li2" :class="current==index?'active':''" @mouseover="handlemouseOver(index)" @mouseleave="handlemouseleave(index)" v-for="(item,index) in staffDetailList" :key="item.userId">
                  <span class="num1">{{item.fullName}}</span>
                  <span class="num2">{{item.orgName}}</span>

                  <span class="num3 " :class="item.status=='01'?'onjob':item.status=='02'?'borrow':item.status=='03'?'transfer':item.status=='04'?'retire':item.status=='05'?'leave':item.status=='06'?'sick':'onjob'">{{item.status | filt(statusArr)}}</span>
                  <span class="num4">{{item.mobile}}</span>
                </li>
              </template>
            </autoScroll>
          </div>

          <!-- </ul> -->
        </div>
      </div>

image.png

2.内部组件

<template>
  <div ref="forwardScrollBox" class="forward-scroll-box" @mouseenter="mouseenter" @mouseleave="mouseleave">
    <div ref="forwardContent" class="forward-content">
      <slot name="forwardContent"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "ScrollBox",
  data() {
    return {
      scrollContentHeight: 0, // 滚动内容的高度
      scrollBoxHeight: 0, // 滚动父级盒子的高度
      scrollableHeight: 0, // 可以滚动的高度
      scrollTop: 0, // 元素已经滚动的高度
      timer: null, // 定时器
    };
  },
  mounted() {
    this.$nextTick(() => {
      // 窗口大小变化时，重新获取滚动相关元素的高度
      window.onresize = this.getInitHeight();
      // 监听元素滚动事件
      // this.$refs.forwardScrollBox.addEventListener('scroll', this.handleScroll, true);
    });
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    getInitHeight() {
      // 获取限制高度滚动容器的真实高度
      this.scrollBoxHeight =
        this.$refs.forwardScrollBox.getBoundingClientRect().height;
      // 获取需要滚动元素的真实高度
      this.scrollContentHeight =
        this.$refs.forwardContent.getBoundingClientRect().height;
      // 可以滚动的高度
      this.scrollableHeight = this.scrollContentHeight - this.scrollBoxHeight;
      console.log(
        "内容高度",
        this.scrollContentHeight,
        "盒子高度",
        this.scrollBoxHeight,
        "可以滚动的高度",
        this.scrollableHeight
      );
      this.autoScroll();
    },
    // 自动滚动
    autoScroll() {
      this.timer = setInterval(() => {
        if (this.scrollableHeight >= this.scrollTop) {
          
          // 当为滚动到结尾时滚动
          this.scrollTop = this.$refs.forwardScrollBox.scrollTop += 18;
          console.log('this.scrollTop', this.scrollTop);
        } else {
          // 滚动结束，清除当前定时器，scrollTop重置为0，继续滚动
          this.scrollTop = this.$refs.forwardScrollBox.scrollTop = 0;
          clearInterval(this.timer);
          this.autoScroll();
        }
        // console.log('转发数定时器')
      }, 1000);
    },
    // 鼠标移入时停止滚动
    mouseenter() {
      clearInterval(this.timer);
    },
    // 鼠标移开继续滚动
    mouseleave() {
      this.autoScroll();
    },
    // 滚动元素滚动时的方法
    // handleScroll(e) {
    //   console.log(e.target.scrollTop, this.scrollTop);
    // }
  },
};
</script>

<style lang="less" scoped>
// .forward-scroll-box::-webkit-scrollbar {
//   display: none;
// }
.forward-scroll-box::-webkit-scrollbar {
  width: 0.06rem;
}

.forward-scroll-box::-webkit-scrollbar-track-piece{
  background: rgb(14,29,40);
}
.forward-scroll-box::-webkit-scrollbar-thumb {
  background: #2d6358;
  border: none;
}
.forward-scroll-box {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
</style>