eta_front/src/views/BI_manage/components/TableBox.vue

<template>
  <div class="table-box" v-if="compData" ref="compRef" v-loading="loading">
    <div class="top-title-box">
      <div class="title">{{ compData.ExcelName }}</div>
      <div class="opt-box">
        <img
          class="icon"
          src="~@/assets/img/icons/refresh_blue_new.png"
          alt=""
        />
        <slot name="drag"></slot>
        <slot name="delete"></slot>
      </div>
    </div>
    <img class="bg" :src="compData.ExcelImage" alt="" />
  </div>
</template>

<script>
export default {
  props: {
    compData: null
  },
  data() {
    return {
      loading: true,
      observer:null,
      isVisible: false, // 是否可见
    }
  },
  mounted() {
    console.log('表格组件挂载', this.compData.ExcelInfoId);
    this.createObserver();
  },
  beforeUnmount() {
    if (this.observer) {
      this.observer.disconnect();
    }
  },
  methods: {
    // 获取表格数据
    handleGetTableData(){
      setTimeout(() => {
        console.log('表格组件加载结束', this.compData.ExcelInfoId);
        this.loading=false
      }, 2000);
    },

    // 利用判断是否进入可视区域 来加载数据 
    // 如果加载过了就不用再加载了
    createObserver() {
      const options = {
        root: null, // 使用浏览器可视区域为根
        threshold: 0.1, // 当至少10%的内容进入可视区时触发回调
      };

      this.observer = new IntersectionObserver(this.handleIntersect, options);
      this.observer.observe(this.$refs.compRef); // 监听组件
    },
    handleIntersect(entries) {
      if(this.isVisible) return 
      entries.forEach(entry => {
        // 判断是否在可视范围内
        if (entry.isIntersecting) {
          this.isVisible = true;
          console.log('Component is visible');
          // 在这里你可以执行其他操作，比如懒加载数据或图片等
          this.handleGetTableData()
        }
      });
    }
  },
}
</script>

<style lang="scss" scoped>
.table-box {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  .top-title-box {
    display: flex;
    margin-bottom: 10px;
    .title {
      font-size: 20px;
      font-weight: bold;
      flex: 1;
      &::before {
        content: "";
        display: inline-block;
        width: 4px;
        height: 20px;
        background-color: #0052d9;
        position: relative;
        top: 2px;
        margin-right: 5px;
      }
    }
    .opt-box {
      flex-shrink: 0;
      margin-left: 10px;
      .icon {
        width: 24px;
        height: 24px;
        margin-left: 5px;
      }
    }
  }
  .bg {
    width: 100%;
    height: 200px;
  }
}
</style>