vue-ganttastic甘特图label标签横向滚动固定方法

这个甘特图之前插件里，没有找到能固定label标签在屏幕上的办法，用css各种办法都没有实现，所以我我直接手写定位，用js监听滚动条滚动的距离，然后同步移动甘特图label标签，造成一种定位的错觉，以下是代码：

我用的是介绍 | Pure Admin 保姆级文档（已更新至最新版v6.0.0）这个前端框架，感觉功能还是非常完善的，作者全职做开源，希望大家也多多支持。

这个是全部甘特图的示例代码

重点处理方法是：

// 添加滚动位置状态
const scrollLeft = ref(0);
// 添加容器引用
const containerRef = ref(null);

// 添加和移除滚动事件监听
onMounted(() => {
  // 延迟添加事件监听，确保DOM已完全渲染
  setTimeout(() => {
    if (containerRef.value) {
      containerRef.value.addEventListener("scroll", handleScroll);
      console.log("滚动监听已添加", containerRef.value);
    }
  }, 500);
});


// 滚动事件处理函数
function handleScroll(e) {
  scrollLeft.value = e.target.scrollLeft;
  console.log("滚动事件触发", scrollLeft.value);
  const labels = document.querySelectorAll(
    ".g-gantt-row-label, .g-gantt-row-label-container"
  );
  labels.forEach(label => {
    label.style.position = "absolute";
    label.style.left = scrollLeft.value + "px";
  });
}
onUnmounted(() => {
  if (containerRef.value) {
    containerRef.value.removeEventListener("scroll", handleScroll);
    console.log("滚动监听已移除");
  }
});