syncfusion-vue-gantt-chart

实现 Syncfusion Vue 甘特图

用于项目管理的组件，可在 Vue 2 和 Vue 3 应用中呈现类似 Microsoft Project 的界面，以安排和管理任务、依赖关系及资源。

何时使用此技能

在用户需要执行以下操作时使用此技能：

• 设置甘特图：在 Vue 2（Vue CLI）或 Vue 3（Vite）项目中进行设置
• 绑定数据：使用本地数组、自引用数据或远程 DataManager 数据源
• 安排任务：设置自动／手动模式、工期单位（日、小时、分钟、周、月）、基线、未计划任务和工作日历
• 管理任务依赖关系：使用 FS、FF、SS、SF 前置任务类型，并控制限制和连接线
• 编辑任务：单元格编辑、对话框编辑、拖动／调整任务栏大小、为未计划任务绘制任务栏、添加／删除行、缩进／取消缩进
• 使用资源：分配资源、资源视图、多任务栏视图
• 配置列：重新排序、调整大小、冻结、跨列、模板、WBS、序列号、复选框
• 自定义时间线：顶部／底部层级、缩放、时间单位（小时至十年）、无限滚动
• 筛选和排序：列菜单筛选、类似 Excel 的筛选、工具栏搜索、排序
• 选择行或单元格：行／单元格选择、层级复选框模式、选择事件
• 使用工具栏：内置项（Add、Edit、Delete、Search、ExpandAll…）和自定义项
• 自定义任务栏和标签：模板、数据标记／指示器、工具提示（任务栏／连接线／基线／时间线）、标签设置
• 添加事件标记和节假日：项目里程碑线、非工作日
• 管理日历：包含工作时间／节假日的项目日历，以及用于自定义排程的任务专属日历
• 导出：Excel（单个／多个甘特图、自定义数据）和 PDF（页眉、页脚、自定义内容）
• 控制布局：拆分器位置、加载动画、状态持久化
• 在甘特图中执行撤销／重做操作
• 为大型数据集启用虚拟滚动
• 配置时区和全球化设置：区域设置、RTL、时区偏移
• 上下文菜单：右键单击行和列标题以执行快捷操作
• 关键路径：突出显示决定项目结束日期的任务

组件概览

功能	注入的模块	关键属性／API
编辑	Edit	editSettings
筛选	Filter	allowFiltering
排序	Sort	allowSorting
选择	Selection	selectionSettings
工具栏	Toolbar	toolbar
日期标记	DayMarkers	eventMarkers、holidays
Excel 导出	ExcelExport	excelExport()
PDF 导出	PdfExport	pdfExport()
虚拟滚动	VirtualScroll	enableVirtualization
关键路径	CriticalPath	enableCriticalPath
撤销／重做	UndoRedo	enableUndoRedo、undoRedoStepsCount、undoRedoActions
列菜单	ColumnMenu	showColumnMenu
上下文菜单	ContextMenu	contextMenuItems

包： @syncfusion/ej2-vue-gantt
组件标签： <ejs-gantt>
Composition API 导入： GanttComponent as EjsGantt
Options API 组件键： 'ejs-gantt': GanttComponent

导航指南

入门

📄 阅读： references/getting-started.md

• Vite（Vue 3）和 Vue CLI（Vue 2）项目设置
• 安装 @syncfusion/ej2-vue-gantt 和主题包
• 使用 Syncfusion 主题包引用 CSS
• Composition API 和 Options API 注册
• 使用 taskFields 的最简可运行示例
• 模块注入模式（provide）
• Quasar 框架设置
• 使用 actionFailure 处理错误

数据绑定

📄 阅读： references/data-binding.md

• 本地数组数据（层级结构，以及带有 parentID 的自引用/扁平数据）
• 使用 DataManager 处理远程数据（ODataV4、WebAPI）
• 使用 RemoteSaveAdaptor（batchUrl）远程保存数据
• 通过 load + Query.addParams() 向服务器发送额外参数
• 使用 actionFailure 处理服务器异常
• 从外部 Ajax 请求绑定数据（本地绑定）
• 按需加载（延迟加载子行）
• 不可变数据模式
• 大数据量虚拟滚动

任务排程

📄 阅读： references/task-scheduling.md

• 自动、手动、自定义排程模式（taskMode）
• Auto（默认）：根据工作时间、节假日、周末和前置任务验证日期
• Manual：日期全部按数据源中的值使用，不进行自动调整
• validateManualTasksOnLinking: true —— 即使在手动模式下，也强制遵循前置任务日期
• 自定义模式：通过 taskFields.manual 布尔字段为每个任务设置排程方式（true = 手动）
• taskFields 映射（id、name、startDate、endDate、duration、durationUnit、progress、parentID、dependency、work、type、notes 等）
• 全局工期单位（durationUnit —— day、hour、minute、week、month；默认值为 day）
• 通过 taskFields.durationUnit 数据字段映射每个任务的工期单位
• 在工期字符串中内联指定工期单位：'3days'、'12hours'、'1800minutes'、'2weeks'、'3months'
• 周和月工期单位，并可配置每周/每月的天数（daysPerWeek、daysPerMonth）
• 未排程任务类型：仅有开始日期、仅有结束日期、仅有工期、里程碑（duration: 0）
• allowUnscheduledTasks: false 会自动将缺失日期填为工期为 1 天，并使用项目开始日期
• 工作时间范围（dayWorkingTime 的 from/to —— 注入 DayMarkers）
• 每天的工作时长（weekWorkingTime —— 覆盖已列出日期的 dayWorkingTime；未列出的日期回退为 dayWorkingTime）
• 非工作日：workWeek 数组 + highlightWeekends
• 设置 includeWeekend: true，在工期计算中计入周末

日历设置

📄 阅读： references/calendar-settings.md

• 项目日历（calendarSettings.projectCalendar）—— 为所有任务设置默认工作时间和节假日
• 任务日历（calendarSettings.taskCalendar）—— 通过 taskFields.calendarId 为特定任务设置自定义日历
• 工作时间配置（每天的 from/to 时间）和日历例外
• 节假日定义和非工作日管理
• 与全局工作时间设置（dayWorkingTime、weekWorkingTime）的交互
• 对工期计算、排程和依赖关系的影响
• 为任务分配日历，以支持团队或地区特定的排程

基线

📄 阅读： references/baseline.md

• 启用基线可视化（renderBaseline: true）
• 基线字段映射（baselineStartDate、baselineEndDate、baselineDuration）
• 创建基线里程碑（baselineDuration: 0）
• 通过 baselineColor 属性或 .e-baseline-bar CSS 类自定义颜色
• 基线模板 —— 使用 baselineTemplate 自定义渲染，为每个任务设置多个基线（原始与修订）
• 模板 API 可访问内部指标（baselineTop、baselineHeight、taskBarHeight、getTaskLeft()）
• 渲染多个基线（比较原始、修订和草案排程）
• 适用于：排程偏差跟踪、里程碑规划、阶段比较

任务约束

📄 阅读： references/task-constraints.md

• 8 种约束类型表：ASAP（0）、ALAP（1）、MSO（2）、MFO（3）、SNET（4）、SNLT（5）、FNET（6）、FNLT（7）
• taskFields.constraintType — 映射数据中的数字约束类型字段
• taskFields.constraintDate — 映射数据中的约束日期字段
• 会触发违规弹窗的严格约束类型：MSO、MFO、SNLT、FNLT
• 使用 actionBegin 和 requestType === 'validateTaskViolation' — 拦截违规
• args.validateMode.respectMustStartOn/Off 标志 — 静默强制执行（不显示弹窗）
• 全部四个标志：respectMustStartOn、respectMustFinishOn、respectStartNoLaterThan、respectFinishNoLaterThan
• 通过具名插槽和 data.ganttProperties.constraintType 将约束名称显示为右侧标签
• 所需模块：Selection、Toolbar、DayMarkers、Edit、Filter、Sort、ContextMenu

任务依赖关系

📄 阅读： references/task-dependencies.md

• 前置任务类型：FS、SS、FF、SF — 格式为 "{ID}{Type}"，例如 "2FS"、"3SS"
• 通过 allowedDependencyTypes 属性（允许类型数组）限制可用的依赖类型
• 在解析、对话框编辑和任务栏编辑期间验证依赖类型
• 使用单位后缀表示延迟/提前量："2FS+2days"、"4FF+960m"、"7SS+16h"、"3FS-1days"
• 多个前置任务以逗号分隔："2FS,3FF"
• taskFields.dependency — 映射前置任务字符串字段
• allowParentDependency: true（默认值）— 允许父级到父级/子级的链接
• 映射 dependency 后会自动渲染连接线
• 交互式绘制：拖动任务栏手柄 — 需要 Edit 模块和 allowTaskbarEditing: true
• autoUpdatePredecessorOffset: true — 在初始加载时重新计算偏移量，使其与日历调整后的位置一致
• 运行时切换：this.$refs.gantt.ej2Instances.autoUpdatePredecessorOffset = value
• updateOffsetOnTaskbarEdit: false — 拖动任务栏时禁用自动偏移量更新
• 使用 actionBegin 和 requestType === 'validateLinkedTask' — 处理依赖关系验证
• args.validateMode.respectLink — 如果编辑违反链接，则还原编辑
• args.validateMode.removeLink — 移除链接并保留编辑
• args.validateMode.preserveLinkWithEditing — 更新偏移量并同时保留链接和编辑（默认值为 true）
• 验证对话框：所有模式都禁用时显示；根据方向提供 2 或 3 个选项
• 显示/隐藏连线：切换 .e-gantt-dependency-view-container 的 visibility CSS 值

管理任务（编辑）

📄 阅读： references/managing-tasks.md

• 启用编辑（editSettings）——注入 Edit 模块
• 单元格编辑（自动模式）、对话框编辑、任务栏编辑
• 单元格编辑类型：numericedit、dropdownedit、booleanedit、datepickeredit、datetimepickeredit
• 单元格编辑模板（create/write/read/destroy 钩子）
• 禁用特定列的编辑（columns.allowEditing: false）
• 只读甘特图（readOnly: true）
• 通过工具栏、上下文菜单或 editModule.addRecord() 添加任务
• 使用默认值打开新任务对话框（actionBegin + beforeOpenAddDialog）
• 自定义对话框选项卡（使用 fields 和 additionalParams 配置 addDialogFields / editDialogFields）
• 通过 additionalParams 使用 RTE inlineMode 自定义 Notes 选项卡
• 通过工具栏或 editModule.deleteRow() 删除任务；使用 showDeleteConfirmDialog 显示确认对话框
• 缩进和取消缩进——工具栏项或 indent() / outdent() 方法
• 加载时拆分任务——层级式（taskFields.segments 搭配内嵌的 Segments 数组）或自引用式（taskFields.segmentId + segmentData 平面集合）；也可通过上下文菜单、对话框或 splitTask() 动态拆分
• 通过上下文菜单或拖动合并片段；限制（不能拆分父任务或里程碑）
• 任务栏编辑：拖动、调整大小、进度手柄、连接点
• 禁止编辑特定任务的任务栏（taskbarEditing 事件 + args.cancel）
• 通过 queryTaskbarInfo + CSS .e-preventEdit 隐藏任务栏编辑手柄
• 任务栏编辑工具提示（tooltipSettings.editing 模板）
• 触摸交互：双击、点按并拖动、点按连接点
• 列验证规则（columns.validationRules）
• 自定义验证（validationRules 中的回调函数）
• 通过 actionBegin（beforeOpenEditDialog）进行依赖项/资源网格验证
• 使用 UrlAdaptor + batchUrl 进行服务器端 CRUD（added/changed/deleted 集合）
• updateRecordByID()、addRecord()、deleteRecord()、indent()、outdent()

任务栏绘制

📄 阅读： references/taskbar-draw.md

• 启用任务栏绘制（在 editSettings 中设置 allowTaskbarDraw: true）——通过在时间线中拖动来创建/安排未排期任务
• 根据绘制的任务栏自动计算开始日期、结束日期和工期
• 绘制交互遵循工作时间、节假日、周末和任务日历
• 输出排期及生成的字段（StartDate、EndDate、Duration）
• 正确安排任务所需的前置条件和相关设置
• 部分数据处理（完全未排期、部分排期、已排期）
• 与依赖项和任务类型（父任务、里程碑、拆分任务）的交互
• 与编辑和日历集成结合使用的最佳实践

资源

📄 阅读： references/resources.md

• 定义资源集合和 resourceFields
• 为任务分配资源（resourceInfo）
• 资源视图布局
• 多任务栏视图
• 资源单位和工作量分配

列

📄 阅读： references/columns.md

• 列定义（field、headerText、width、format）
• ColumnsDirective / e-columns + e-column 指令
• 列重新排序、调整大小、跨列
• 冻结列
• 列菜单
• 列模板
• WBS（工作分解结构）列
• 序号列——自动递增的显示列，以及排序、筛选、虚拟化和分页时的行为
• 响应式列
• 复选框选择列

时间线

📄 阅读： references/timeline.md

• timelineSettings — 顶层和底层的时间单位
• 时间单位：小时、天、周、月、年、十年
• 自定义时间线标签／格式化器
• 缩放（放大、缩小、缩放至适合视图）
• timelineUnitSize
• timelineViewMode 快捷设置（同时设置两个层级）
• viewStartDate / viewEndDate — 固定可见日期范围
• weekStartDay — 自定义每周的第一天（0–6）
• updateTimescaleView — 任务变更时自动更新时间刻度
• showTooltip — 悬停时显示时间线单元格提示
• showWeekend — 显示或隐藏周末列
• timelineTemplate — 自定义时间线层级的单元格内容
• enableInfiniteTimelineScroll — 启用无限水平滚动（用户浏览时动态扩展时间线）

筛选和排序

📄 阅读： references/filtering-and-sorting.md

• 列菜单筛选（allowFiltering）
• 类似 Excel 的筛选
• 工具栏搜索框
• filterSettings 配置
• 列排序（allowSorting）
• 多列排序
• sortSettings
• 编程式 gantt.search(key) 方法
• searchSettings — 字段、运算符、忽略大小写
• 添加／移除排序的键盘快捷键
• 通过 actionBegin / actionComplete 触发排序事件（args.requestType === 'sorting'）
• 触屏排序：点击列标题；多列排序使用弹出窗口

选择

📄 阅读： references/selection.md

• allowSelection: false — 禁用选择
• 选择模式：'Row' / 'Cell' / 'Both'
• 选择类型：'Single' / 'Multiple'
• selectedRowIndex — 初始加载时预选一行
• 动态选择行（selectRow、selectRows）
• 通过 dataBound 根据条件选择行
• 单元格选择 — getSelectedRowCellIndexes()
• 使用 Ctrl+单击选择多个单元格
• 动态选择单元格（selectCell）
• 切换选择状态（enableToggle）
• 悬停高亮（enableHover）
• selectionSettings 完整参考表
• 编程式 API（clearSelection、getSelectedRecords、getSelectedRowIndexes）
• 完整事件表（rowSelecting、rowSelected、rowDeselecting、rowDeselected、cellSelecting、cellSelected、cellDeselected）
• 通过 rowSelecting 阻止选择行（args.cancel = true）
• 通过 cellSelecting 阻止选择单元格（args.cancel = true）
• 通过 checkboxMode 选项和层级模式进行复选框选择
• 层级复选框模式：'Self'（独立）、'Hierarchy'（沿树传播）、'FilteredHierarchy'（在筛选视图中传播）
• 选择状态沿父子关系传播
• 对折叠／展开的记录进行复选框选择
• 触屏交互（单击 + 多选弹出窗口）

工具栏

📄 阅读： references/toolbar.md

• 内置工具栏项：Add、Edit、Update、Delete、Cancel、Search、ExpandAll、CollapseAll、ZoomIn、ZoomOut、ZoomToFit、ExcelExport、PdfExport、PrevTimeSpan、NextTimeSpan、Undo、Redo
• 使用 click 处理函数的自定义工具栏项
• 工具栏事件

任务栏和标签

📄 阅读： references/taskbar-and-labels.md

• 任务栏自定义（高度、颜色、模板）
• labelSettings — 左侧、右侧、任务标签
• 数据标记／指示器
• 任务提示
• 连接线提示
• 基线提示
• 时间线提示
• 进度条自定义
• 父任务和里程碑任务的任务栏外观

事件标记和节假日

📄 阅读： references/event-markers-and-holidays.md

• eventMarkers — 在关键日期显示带标签的垂直线
• holidays — 高亮非工作日
• 工作时间配置
• 周末高亮（highlightWeekends）
• 注入 DayMarkers 模块

导出（Excel 和 PDF）

📄 阅读： references/export.md

• Excel 导出（基础、自定义数据源、多个甘特图）
• PDF 导出（基础、页眉/页脚、自定义）
• 导出属性和回调

行和滚动

📄 阅读： references/rows-and-scrolling.md

• rowHeight — 统一行高，单位为像素（默认值为 46px）
• collapseAllParentTasks: true — 初始时折叠所有父任务
• taskFields.expandState — 将布尔数据字段映射到每个任务的展开/折叠状态
• expanding / collapsing 事件 — 设置 args.cancel = true 以阻止特定行
• expanded / collapsed 事件 — 操作后触发（不可取消）
• rowDataBound — 设置整行样式；queryCellInfo — 设置单元格样式
• 交替行样式：.e-altrow（网格）+ tr.e-chart-row:nth-child(even)（图表）
• 通过 queryCellInfo 的 args.rowSpan 合并行
• columns.clipMode — Clip | Ellipsis | EllipsisWithTooltip（默认值）
• 行拖放 — 注入 RowDD、Edit；设置 allowRowDragAndDrop: true
• allowTaskbarDragAndDrop — 在行之间拖动任务栏
• rowDragStartHelper — 通过 args.cancel 有条件地阻止拖动
• rowDrop — 验证/取消放置；args.dropPosition = 'above'|'below'|'child'
• reorderRows(fromIndexes, toIndex, position) — 以编程方式重新排序行
• scrollToDate('MM/DD/YYYY') — 将时间线滚动到指定日期
• scrollToTask('id') — 将图表滚动到任务的任务栏
• setScrollTop(px) — 垂直滚动；也可通过 ganttChartModule.scrollObject.setScrollTop() 调用
• 响应式容器：height: '100%'、width: '100%'（父级需要显式设置高度）
• 虚拟滚动：enableVirtualization: true，注入 VirtualScroll
• enableTimelineVirtualization — 仅渲染可见的时间线列

布局和分隔条

📄 阅读： references/layout-and-splitter.md

• splitterSettings — 列索引或位置
• 加载动画
• 状态持久化（enablePersistence）
• localStorage 键格式（'gantt' + componentId）
• 手动获取/设置持久化状态
• 阻止特定属性持久化（覆盖 addOnPersist）
• 重新加载后恢复表头模板（getPersistData + treeGrid.setProperties）
• 不会持久化的内容（列模板、headerText、headerTemplate、formatter、valueAccessor）
• 全局和局部上下文配置
• 高度、宽度和响应式布局

撤销/重做

📄 阅读： references/undo-redo.md

• 启用撤销/重做（enableUndoRedo: true，注入 UndoRedo）
• undoRedoStepsCount — 历史记录深度
• undoRedoActions — 限定要跟踪的操作
• 完整的支持操作表（19 种操作类型，包括 ZoomIn/Out、ColumnResize 等）
• 工具栏中的撤销/重做项
• 以编程方式调用 undo() / redo()
• getUndoActions() / getRedoActions()
• clearUndoCollection() / clearRedoCollection()

无障碍功能

📄 阅读： references/accessibility.md

• 符合 WCAG 2.1 AA 级标准
• 键盘导航（网格、工具栏、上下文菜单快捷键）
• ARIA 角色和属性（treegrid、row、gridcell、columnheader、dialog）
• 通过 npm 主题包支持主题（tailwind3、material、material3、bootstrap5、fluent、fabric、highcontrast）
• 屏幕阅读器支持（NVDA、JAWS、VoiceOver）——通过 queryTaskbarInfo 自定义 taskbarAriaLabel
• 焦点管理和 autoFocusTasks

编程方法

📄 阅读： references/gantt-methods.md

• 通过 this.$refs.gantt 访问实例（Options API）——在 <ejs-gantt> 上设置 ref="gantt"
• 列： autoFitColumns(fieldNames?)、getGanttColumns()、getGridColumns()、refreshColumns()、reorderColumns(from, to)
• 任务编辑： cancelEdit()、changeTaskMode(data)、convertToMilestone(id)、deleteRecord(taskDetail)、updateRecordByIndex(index, data)、updateTaskId(currentId, newId)
• 展开/折叠行： expandByID()、expandByIndex()、collapseByID()、collapseByIndex()
• 拆分/合并： splitTask(taskId, splitDate)、mergeTask(taskId, segmentIndexes)
• 前置任务： removePredecessor(id)
• 查询： getRecordByID(id)、getRecordByIndex()、getTaskByUniqueID(id)、getTaskInfo(taskId)、getCurrentViewData()、getExpandedRecords(records)、getCriticalTasks()
• DOM 访问： getRowByID(id)、getRowByIndex(index)、getTaskbarHeight()
• 格式化辅助方法： getDurationString(duration, unit)、getWorkString(work, unit)
• 滚动： scrollToTask(taskId)、setScrollTop(scrollTop)、updateChartScrollOffset(left, top)
• 数据： updateDataSource(dataSource, args)
• 排序： removeSortColumn(columnName)
• 选择： selectCells(rowCellIndexes) — 需要设置 selectionSettings.mode: 'Cell'

上下文菜单

📄 阅读： references/context-menu.md

• 注入 ContextMenu、Edit、Sort、Resize、Selection 模块
• 启用：enableContextMenu: true、allowSorting: true、allowResizing: true
• 默认内置项表：AutoFit、AutoFitAll、SortAscending、SortDescending、TaskInformation、Add、Indent、Outdent、DeleteTask、Save、Cancel、DeleteDependency、Convert
• 自定义项：混用内置字符串和描述对象 { text, id, target, iconCss }
• target: '.e-content' 将菜单项限定为行右键菜单；target: '.e-gridheader' 将其限定为表头菜单
• contextMenuClick 事件——通过 args.item.id 处理自定义操作
• contextMenuOpen 事件——通过 args.hideItems 动态隐藏菜单项；检查 args.type !== 'Header'
• 触屏设备：长按行以打开上下文菜单

关键路径

📄 阅读： references/critical-path.md

• 启用关键路径（enableCriticalPath，注入 CriticalPath）
• 工具栏切换按钮（'CriticalPath'）
• 通过 queryTaskbarInfo 自定义关键任务栏颜色
• data.isCritical 和 data.slack 属性
• 使用时差检测近关键任务

时区与国际化

📄 阅读： references/timezone-and-globalization.md

• timezone — IANA 字符串（例如 'UTC'、'America/New_York'），在渲染时应用
• timezone: 'UTC' — 无论用户本地时钟如何，都显示相同时间
• 小时级时间线：组合使用 timezone、durationUnit: 'Hour'、dateFormat: 'hh:mm a' 和底层 unit: 'Hour'
• 使用时区执行 CRUD：编辑操作在已配置的时区中进行；actionComplete 接收转换为本地时间的日期，以便持久化到数据库
• actionComplete 中的 args.data.ganttProperties.endDate — 编辑后的值已转换回本地时间
• Timezone 类（@syncfusion/ej2-base）— 手动进行时区运算
• timezone.offset(date, tz) → 与 UTC 的时差（分钟）
• timezone.convert(date, fromOffset, toOffset) → 转换为目标时区的日期（IANA 或数字）
• timezone.remove(date, tz) → 移除时差，返回仅含墙上时间的普通日期
• 区域设置和国际化（locale、L10n.load()）
• RTL 支持（enableRtl: true + 区域设置字符串）
• 列上的日期格式配置（format: 'dd/MM/yyyy' 或 'yMd'）
• currencyCode — 为货币列设置币种

---

快速入门（Vue 3 — Composition API）

npm install @syncfusion/ej2-vue-gantt --save

<template>
  <ejs-gantt
    id="gantt"
    :dataSource="data"
    :taskFields="taskFields"
    height="450px"
  ></ejs-gantt>
</template>

<script setup>
import { GanttComponent as EjsGantt } from '@syncfusion/ej2-vue-gantt';

const data = [
  { TaskID: 1, TaskName: 'Planning', StartDate: new Date('04/02/2019'), EndDate: new Date('04/06/2019'), ParentID: null },
  { TaskID: 2, TaskName: 'Identify location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, ParentID: 1 },
  { TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, ParentID: 1 },
];

const taskFields = {
  id: 'TaskID',
  name: 'TaskName',
  startDate: 'StartDate',
  endDate: 'EndDate',
  duration: 'Duration',
  progress: 'Progress',
  parentID: 'ParentID'
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/gantt/index.css";
</style>

快速入门（Vue 3 — Options API）

<script>
import { GanttComponent, Edit, Filter, Sort, Toolbar, Selection, DayMarkers } from '@syncfusion/ej2-vue-gantt';

export default {
  name: 'App',
  components: { 'ejs-gantt': GanttComponent },
  data() {
    return {
      data: [...],
      taskFields: { id: 'TaskID', name: 'TaskName', startDate: 'StartDate', duration: 'Duration', progress: 'Progress', parentID: 'ParentID' },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'ExpandAll', 'CollapseAll'],
      editSettings: { allowAdding: true, allowEditing: true, allowDeleting: true, allowTaskbarEditing: true }
    };
  },
  provide: {
    gantt: [Edit, Filter, Sort, Toolbar, Selection, DayMarkers]
  }
};
</script>

常见模式

模式 1 — 仅注入所用功能

甘特图中的功能需要显式注入模块。仅注入已启用功能所需的模块，以保持较小的打包体积：

// Composition API (Vue 3)
import { provide } from 'vue';
import { Edit, Filter, Sort, Toolbar } from '@syncfusion/ej2-vue-gantt';
provide('gantt', [Edit, Filter, Sort, Toolbar]);

// Options API
provide: { gantt: [Edit, Filter, Sort, Toolbar] }

模式 2 — 自引用数据与层级数据

// Self-referential (flat array with ParentID — recommended for CRUD)
taskFields: { id: 'TaskID', name: 'TaskName', startDate: 'StartDate', duration: 'Duration', parentID: 'ParentID' }

// Hierarchical (nested subtasks array)
taskFields: { id: 'TaskID', name: 'TaskName', startDate: 'StartDate', duration: 'Duration', child: 'subtasks' }

模式 3 — 功能齐全的甘特图

<ejs-gantt
  :dataSource="data"
  :taskFields="taskFields"
  :editSettings="editSettings"
  :toolbar="toolbar"
  :allowFiltering="true"
  :allowSorting="true"
  :splitterSettings="{ columnIndex: 2 }"
  :timelineSettings="{ topTier: { unit: 'Week' }, bottomTier: { unit: 'Day' } }"
  height="500px"
></ejs-gantt>

关键属性参考

属性	类型	用途
dataSource	Array / DataManager	任务数据
taskFields	Object	将数据字段映射到甘特图字段
height	String	组件高度（例如，'450px'）
toolbar	Array	工具栏项名称或自定义项对象
editSettings	Object	控制允许执行哪些编辑操作
allowFiltering	Boolean	启用列筛选菜单
allowSorting	Boolean	启用列标题排序
timelineSettings	Object	顶部/底部层级的单位和格式
splitterSettings	Object	网格/图表面板宽度比例
labelSettings	Object	左侧、右侧和任务标签字段
resources	Array	资源集合
resourceFields	Object	映射资源 ID/名称字段
eventMarkers	Array	带标签的垂直标记线
holidays	Array	非工作日定义
projectStartDate	Date	显式指定项目开始时间
projectEndDate	Date	显式指定项目结束时间
enableVirtualization	Boolean	为大型数据集启用虚拟行渲染
enableCriticalPath	Boolean	突出显示关键路径任务
baselineTemplate	function/string	自定义基线渲染，用于计划进度和高级基线布局
enableInfiniteTimelineScroll	boolean	启用时间轴水平无限滚动，随着用户浏览扩展可见范围