table header吸顶

// isSticky 是否需要固定
const createObserver = () => {
  if (!isSticky) return;
  // 初始化交叉观察器
  observer = new IntersectionObserver(
    (entries) => {
      // 处理观察到的变化
      const entry = entries[0];
      // 更新可见状态
      // 可以在这里添加元素进入/离开可视区的逻辑
      const headerDiv: HTMLDivElement | null = tableRef.value?.$el?.querySelector(
        '.需要固定的class',
      );
      if (entry.isIntersecting) {
        if (headerDiv) {
          headerDiv.removeAttribute('style');
        }
      } else {
        if (headerDiv) {
          headerDiv.style.position = 'fixed';
          headerDiv.style.top = '96px';
          headerDiv.style.overflowX = 'scroll';
          headerDiv.style.scrollbarWidth = 'none';
          headerDiv.style.zIndex = '999';
          headerDiv.style.width = tableRef.value?.$el.clientWidth + 'px';
        }
      }
    },
    {
      // 配置选项
      root: null, // 默认为视口
      threshold: [0, 0.5, 1.0], // 当可见比例为0%、50%、100%时触发回调
    },
  );

  // 开始观察目标元素
  if (tableRef.value) {
    observer.observe(tableRef.value?.$el.querySelector('.hidden-columns'));
  }
};

const distroyObserver = () => {
  if (observer && tableRef.value && props.isSticky) {
    const headerDiv: HTMLDivElement | null = tableRef.value?.$el?.querySelector(
      '.需要固定的class',
    );
    if (headerDiv) {
      headerDiv.removeAttribute('style');
    }
    observer.unobserve(tableRef.value?.$el.querySelector('.hidden-columns'));
    observer = null;
  }
};


onMounted(() => {
  createObserver();
});

onBeforeUnmount(() => {
  distroyObserver();
});