Gantt

Installation

yarn install

Run

yarn run serve

Description

A Gantt chart display developed based on Vue, which can be used for agile scenarios such as team collaboration and task division.
Supports grouping
Supports drag and drop
Supports stretching
Supports percentage
Supports time spans: day, week, month
Currently only single-level grouping is implemented. To accommodate possible future needs for two-level or multi-level grouping, part of the code was refactored in the last commit to support multi-level grouping, but this version does not yet implement it.
Advantages: During operations such as dragging, stretching, and progress modification, data is not updated in real-time, but only after the operation, reducing performance loss.
           When editing, deleting, or adding, the whole instance is not recursively modified, but only the modified part is added, deleted, or changed.
Currently being reorganized in preparation for componentization. For now, to use it in a project, you only need to import gant.vue from this project.
Batch data import and export methods are already written and can be copied directly!~

Update Notes

• Support for editing
• Support for deletion
• Fixed the bug where vertical scrolling was not possible (also added bidirectional simultaneous scrolling) #4
• Fixed bugs caused by elementUI
• Regarding time span issues #5
• Currently, it is not possible to implement other spans, such as adding hours, by changing the span configuration. Some configurations are fixed during initialization; this will be changed and provided as an API in the future.

View Demo

See demo

Demo Image

--- Tranlated By Open Ai Tx | Last indexed: 2025-07-01 ---