[Bug] 关于甘特图标记线 不会自动滚到到标记位置scrollToMarkLine的[Bug]

Version

1.22.3

Link to Minimal Reproduction

<script setup> import { ref, onMounted, nextTick, onBeforeUnmount, computed } from 'vue' import { Gantt } from '@visactor/vtable-gantt' import { useTaskStore } from '@/store/taskStore.js' const ganttContainer = ref(null) let ganttInstance = null const taskStore = useTaskStore() // 使用 store 中的甘特图数据 const ganttData = computed(() => taskStore.ganttData) const today = new Date() // 获取当前日期对象 // 初始化甘特图 const initGantt = async () => { // 先获取任务数据 await taskStore.fetchAllTasks() if (ganttData.value.length === 0) { console.warn('没有有效的任务数据') return } // 定义表格列 const columns = [ { field: 'title', title: '任务名称', width: 'auto', sort: true, tree: false }, ]; // 创建甘特图实例 ganttInstance = new Gantt(ganttContainer.value, { records: ganttData.value, taskListTable: { columns, tableWidth: "auto", theme: { headerStyle: { borderColor: '#e1e4e8', borderLineWidth: 1, fontSize: 14, fontWeight: 'bold', color: '#333', bgColor: '#EEF1F5' }, bodyStyle: { borderColor: '#e1e4e8', borderLineWidth: [1, 0, 1, 0], fontSize: 12, color: '#4D4D4D', bgColor: '#FFF' } } }, frame: { outerFrameStyle: { borderLineWidth: 1, borderColor: '#e1e4e8', cornerRadius: 4 }, verticalSplitLine: { lineColor: '#e1e4e8', lineWidth: 1 }, horizontalSplitLine: { lineColor: '#e1e4e8', lineWidth: 1 } }, grid: { verticalLine: { lineWidth: 1, lineColor: '#e1e4e8' }, horizontalLine: { lineWidth: 1, lineColor: '#e1e4e8' } }, headerRowHeight: 40, rowHeight: 40, taskBar: { startDateField: 'start', endDateField: 'end', progressField: 'progress', resizable: false, moveable: false, labelText: '{title} {progress}%', labelTextStyle: { fontFamily: 'Arial', fontSize: 12, textAlign: 'left', textOverflow: 'ellipsis' }, barStyle: { width: 20, barColor: '#ee8800', completedBarColor: '#91e8e0', cornerRadius: 4, borderLineWidth: 1, borderColor: '#e1e4e8' }, hoverBarStyle: { cornerRadius: 4, // 悬停时的圆角半径 barOverlayColor: 'rgba(24, 144, 255, 0.1)' , // 悬停时的覆盖色 }, }, timelineHeader: { colWidth: 80, backgroundColor: '#EEF1F5', horizontalLine: { lineWidth: 1, lineColor: '#e1e4e8' }, verticalLine: { lineWidth: 1, lineColor: '#e1e4e8' }, zoomScale: { enabled: true, defaultLevelIndex: 1, levels: [ // 级别1：年-季度组合 [ { unit: 'year', step: 1, format: date => ${date.dateIndex}年, style: { fontSize: 16, fontWeight: 'bold', color: '#333', textAlign: 'center', backgroundColor: '#EEF1F5' } }, { unit: 'quarter', step: 1, format: date => { const quarter = date.dateIndex; const quarterNames = ['一季度', '二季度', '三季度', '四季度']; return quarterNames[quarter - 1] || ${quarter}季度; }, style: { fontSize: 14, fontWeight: 'bold', color: '#333', textAlign: 'center', backgroundColor: '#EEF1F5' } } ], // 级别2：年-月组合 (适合查看月度计划) [ { unit: 'year', step: 1, format: date => ${date.dateIndex}年, style: { fontSize: 16, fontWeight: 'bold', color: '#333', textAlign: 'center', backgroundColor: '#EEF1F5' } }, { unit: 'month', step: 1, format: date => ${date.dateIndex}月, style: { fontSize: 14, fontWeight: 'bold', color: '#333', textAlign: 'center', backgroundColor: '#EEF1F5' } } ], // 级别3：年月-周组合 (适合查看周度计划) [ { unit: 'month', step: 1, format: date => ${date.startDate.getFullYear()}年${date.startDate.getMonth() + 1}月, style: { fontSize: 16, fontWeight: 'bold', color: '#333', textAlign: 'center', backgroundColor: '#EEF1F5' } }, { unit: 'week', step: 1, format: date => { // 计算ISO周数，确保周数从年初开始计算 const dateObj = new Date(date.startDate); const oneJan = new Date(dateObj.getFullYear(), 0, 1); const numberOfDays = Math.floor((dateObj - oneJan) / (24 * 60 * 60 * 1000)); const weekNum = Math.ceil((dateObj.getDay() + 1 + numberOfDays) / 7); return 第${weekNum}周; }, style: { fontSize: 14, fontWeight: 'bold', color: '#333', textAlign: 'center', backgroundColor: '#EEF1F5' } } ], // 级别4：年月-日组合 (适合查看日度计划) [ { unit: 'month', step: 1, format: date => ${date.startDate.getFullYear()}年${date.startDate.getMonth() + 1}月, style: { fontSize: 16, fontWeight: 'bold', color: '#333', textAlign: 'center', backgroundColor: '#EEF1F5' } }, { unit: 'day', step: 1, format: date => ${date.startDate.getDate()}, style: { fontSize: 14, fontWeight: 'bold', color: '#333', textAlign: 'center', backgroundColor: '#EEF1F5' } } ], ] } }, scrollStyle: { scrollRailColor: 'RGBA(246,246,246,0.5)', visible: 'scrolling', width: 6, scrollSliderCornerRadius: 2, scrollSliderColor: '#5cb85c' }, minDate: '2020-01-01', maxDate: '2028-12-31', markLine: { date: ${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}, style: { lineColor: '#42b983', lineWidth: 2, lineDash: [5, 3] // 虚线样式 }, position: 'middle', scrollToMarkLine: true, } }) } onMounted(async () => { await nextTick() initGantt() }) // 组件卸载时销毁甘特图实例 onBeforeUnmount(() => { if (ganttInstance && typeof ganttInstance.dispose === 'function') { ganttInstance.dispose() } ganttInstance = null }) </script> <style scoped> .gantt-container { width: 100%; height: 100%; overflow: hidden; } #gantt-chart { width: 100%; height: 100%; } </style>

Steps to Reproduce

scrollToMarkLine 设置为true 应该是滚动到标记线位置，但是我设置好了 会滚动，但是没有滚动到指定位置

<script setup> import { ref, onMounted, nextTick, onBeforeUnmount, computed } from 'vue' import { Gantt } from '@visactor/vtable-gantt' import { useTaskStore } from '@/store/taskStore.js' const ganttContainer = ref(null) let ganttInstance = null const taskStore = useTaskStore() // 使用 store 中的甘特图数据 const ganttData = computed(() => taskStore.ganttData) const today = new Date() // 获取当前日期对象 // 初始化甘特图 const initGantt = async () => { // 先获取任务数据 await taskStore.fetchAllTasks() if (ganttData.value.length === 0) { console.warn('没有有效的任务数据') return } // 定义表格列 const columns = [ { field: 'title', title: '任务名称', width: 'auto', sort: true, tree: false }, ]; // 创建甘特图实例 ganttInstance = new Gantt(ganttContainer.value, { records: ganttData.value, taskListTable: { columns, tableWidth: "auto", theme: { headerStyle: { borderColor: '#e1e4e8', borderLineWidth: 1, fontSize: 14, fontWeight: 'bold', color: '#333', bgColor: '#EEF1F5' }, bodyStyle: { borderColor: '#e1e4e8', borderLineWidth: [1, 0, 1, 0], fontSize: 12, color: '#4D4D4D', bgColor: '#FFF' } } }, frame: { outerFrameStyle: { borderLineWidth: 1, borderColor: '#e1e4e8', cornerRadius: 4 }, verticalSplitLine: { lineColor: '#e1e4e8', lineWidth: 1 }, horizontalSplitLine: { lineColor: '#e1e4e8', lineWidth: 1 } }, grid: { verticalLine: { lineWidth: 1, lineColor: '#e1e4e8' }, horizontalLine: { lineWidth: 1, lineColor: '#e1e4e8' } }, headerRowHeight: 40, rowHeight: 40, taskBar: { startDateField: 'start', endDateField: 'end', progressField: 'progress', resizable: false, moveable: false, labelText: '{title} {progress}%', labelTextStyle: { fontFamily: 'Arial', fontSize: 12, textAlign: 'left', textOverflow: 'ellipsis' }, barStyle: { width: 20, barColor: '#ee8800', completedBarColor: '#91e8e0', cornerRadius: 4, borderLineWidth: 1, borderColor: '#e1e4e8' }, hoverBarStyle: { cornerRadius: 4, // 悬停时的圆角半径 barOverlayColor: 'rgba(24, 144, 255, 0.1)' , // 悬停时的覆盖色 }, }, timelineHeader: { colWidth: 80, backgroundColor: '#EEF1F5', horizontalLine: { lineWidth: 1, lineColor: '#e1e4e8' }, verticalLine: { lineWidth: 1, lineColor: '#e1e4e8' }, zoomScale: { enabled: true, defaultLevelIndex: 1, levels: [ // 级别1：年-季度组合 [ { unit: 'year', step: 1, format: date => `${date.dateIndex}年`, style: { fontSize: 16, fontWeight: 'bold', color: '#333', textAlign: 'center', backgroundColor: '#EEF1F5' } }, { unit: 'quarter', step: 1, format: date => { const quarter = date.dateIndex; const quarterNames = ['一季度', '二季度', '三季度', '四季度']; return quarterNames[quarter - 1] || `${quarter}季度`; }, style: { fontSize: 14, fontWeight: 'bold', color: '#333', textAlign: 'center', backgroundColor: '#EEF1F5' } } ], // 级别2：年-月组合 (适合查看月度计划) [ { unit: 'year', step: 1, format: date => `${date.dateIndex}年`, style: { fontSize: 16, fontWeight: 'bold', color: '#333', textAlign: 'center', backgroundColor: '#EEF1F5' } }, { unit: 'month', step: 1, format: date => `${date.dateIndex}月`, style: { fontSize: 14, fontWeight: 'bold', color: '#333', textAlign: 'center', backgroundColor: '#EEF1F5' } } ], // 级别3：年月-周组合 (适合查看周度计划) [ { unit: 'month', step: 1, format: date => `${date.startDate.getFullYear()}年${date.startDate.getMonth() + 1}月`, style: { fontSize: 16, fontWeight: 'bold', color: '#333', textAlign: 'center', backgroundColor: '#EEF1F5' } }, { unit: 'week', step: 1, format: date => { // 计算ISO周数，确保周数从年初开始计算 const dateObj = new Date(date.startDate); const oneJan = new Date(dateObj.getFullYear(), 0, 1); const numberOfDays = Math.floor((dateObj - oneJan) / (24 * 60 * 60 * 1000)); const weekNum = Math.ceil((dateObj.getDay() + 1 + numberOfDays) / 7); return `第${weekNum}周`; }, style: { fontSize: 14, fontWeight: 'bold', color: '#333', textAlign: 'center', backgroundColor: '#EEF1F5' } } ], // 级别4：年月-日组合 (适合查看日度计划) [ { unit: 'month', step: 1, format: date => `${date.startDate.getFullYear()}年${date.startDate.getMonth() + 1}月`, style: { fontSize: 16, fontWeight: 'bold', color: '#333', textAlign: 'center', backgroundColor: '#EEF1F5' } }, { unit: 'day', step: 1, format: date => `${date.startDate.getDate()}`, style: { fontSize: 14, fontWeight: 'bold', color: '#333', textAlign: 'center', backgroundColor: '#EEF1F5' } } ], ] } }, scrollStyle: { scrollRailColor: 'RGBA(246,246,246,0.5)', visible: 'scrolling', width: 6, scrollSliderCornerRadius: 2, scrollSliderColor: '#5cb85c' }, minDate: '2020-01-01', maxDate: '2028-12-31', markLine: { date: `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`, style: { lineColor: '#42b983', lineWidth: 2, lineDash: [5, 3] // 虚线样式 }, position: 'middle', scrollToMarkLine: true, } }) } onMounted(async () => { await nextTick() initGantt() }) // 组件卸载时销毁甘特图实例 onBeforeUnmount(() => { if (ganttInstance && typeof ganttInstance.dispose === 'function') { ganttInstance.dispose() } ganttInstance = null }) </script> <style scoped> .gantt-container { width: 100%; height: 100%; overflow: hidden; } #gantt-chart { width: 100%; height: 100%; } </style>

Current Behavior

scrollToMarkLine 设置为true 应该是滚动到标记线位置，但是我设置好了 会滚动，但是没有滚动到指定位置

Expected Behavior

scrollToMarkLine 设置为true 应该是滚动到标记线位置，但是我设置好了 会滚动，但是没有滚动到指定位置

Environment

- OS:window11
- Browser:edge最新版
- Framework:Vue@3

Any additional comments?

No response