当前位置：首页 > news >正文

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

news 来源：原创 2025/5/15 5:30:18

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

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

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

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
// https://zunnzunn.github.io/vue-ganttastic/introduction.html
import { GGanttChart, GGanttRow } from "@infectoone/vue-ganttastic";// 添加滚动位置状态
const scrollLeft = ref(0);
// 添加容器引用
const containerRef = ref(null);// 现有数据保持不变
const context = ref([[{week: "星期一",beginDate: "06:00",endDate: "22:00",label_column_title: "123",ganttBarConfig: {id: "0",hasHandles: true,label: "需求收集和分析  负责人：小张",style: {background: "#e96560"}}}],[{week: "星期二",beginDate: "09:00",endDate: "18:00",ganttBarConfig: {id: "1",hasHandles: true,label: "系统设计  负责人：小强",style: {background: "#5ccfa3"}}}],[{week: "星期三",beginDate: "07:00",endDate: "20:00",ganttBarConfig: {id: "2",hasHandles: true,label: "编码实现  负责人：老李",style: {background: "#77d6fa"}}}],[{week: "星期四",beginDate: "06:00",endDate: "21:00",ganttBarConfig: {id: "3",hasHandles: true,label: "编码实现  负责人：小明",style: {color: "#fff",background: "#1b2a47"}}}],[{week: "星期五",beginDate: "05:00",endDate: "19:00",ganttBarConfig: {id: "4",hasHandles: true,label: "内部测试  负责人：小雪",style: {background: "#5ccfa3"}}}],[{week: "星期六",beginDate: "10:00",endDate: "22:00",ganttBarConfig: {id: "5",hasHandles: true,label: "系统优化和文档整理  负责人：小欣",style: {background: "#f8bc45"}}}],[{week: "星期天",beginDate: "04:00",endDate: "23:59",ganttBarConfig: {id: "6",immobile: false,hasHandles: false,label: "部署和上线  负责人：老王",style: {background: "#f3953d"}}}],[{week: "星期天",beginDate: "04:00",endDate: "23:59",ganttBarConfig: {id: "6",immobile: false,hasHandles: false,label: "部署和上线  负责人：老王",style: {background: "#f3953d"}}}]
]);// 滚动事件处理函数
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";});
}// 添加和移除滚动事件监听
onMounted(() => {// 延迟添加事件监听，确保DOM已完全渲染setTimeout(() => {if (containerRef.value) {containerRef.value.addEventListener("scroll", handleScroll);console.log("滚动监听已添加", containerRef.value);}}, 500);
});onUnmounted(() => {if (containerRef.value) {containerRef.value.removeEventListener("scroll", handleScroll);console.log("滚动监听已移除");}
});function getWeekRange() {const today = new Date();const dayOfWeek = today.getDay();const startDate = new Date(today);startDate.setDate(today.getDate() - dayOfWeek + 1);const endDate = new Date(startDate);endDate.setDate(startDate.getDate() + 6);const formatDate = date => {const year = date.getFullYear();const month = String(date.getMonth() + 1).padStart(2, "0");const day = String(date.getDate()).padStart(2, "0");return `${year}-${month}-${day}`;};const currentWeekStart = formatDate(startDate);const currentWeekEnd = formatDate(endDate);return {currentWeekStart,currentWeekEnd};
}const weekRangeInChina = getWeekRange();
</script><template><div ref="containerRef" class="gantt-container"><g-gantt-chartchart-start="00:00"chart-end="23:59"precision="hour"date-format="HH:mm"bar-start="beginDate"bar-end="endDate"gridclass="full-width-gantt"><template #upper-timeunit><h1>{{`${weekRangeInChina.currentWeekStart} / ${weekRangeInChina.currentWeekEnd}`}}</h1></template><g-gantt-rowv-for="(item, index) in context":key="index":bars="item":label="item[0].week"highlight-on-hover/></g-gantt-chart></div>
</template><style>
/* 全局样式，确保能覆盖组件内部样式 */
.g-gantt-row-label,
.g-gantt-row-label-container {position: relative !important;transition: none !important;
}.gantt-container {width: 100%;overflow-x: auto;padding-bottom: 10px;
}.full-width-gantt {min-width: 1500px;width: 200%;
}/* 修改标签宽度样式 */
.g-gantt-row-label {width: 100px !important;min-width: 100px !important;max-width: 100px !important;box-sizing: border-box !important;overflow: hidden !important;text-overflow: ellipsis !important;
}
</style>

重点处理方法是：

// 添加滚动位置状态
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("滚动监听已移除");}
});