vue-gantt-elastic基于 Vue.js实现, 是一款高效、轻量级的甘特图组件。具有弹性可扩展的特点，支持实时更新，能够很好地适应不同屏幕尺寸和设备类型，提供了简洁的 API 和完善的文档，方便开发者快速上手和进行定制开发，适用于 Vue 项目中需要展示和管理任务进度的场景

特点

• 灵活度高：从 DOM 树到逻辑层几乎一切都可以更改，无需编译，无需修改 原始代码——通过配置、状态或插件即可实现。

• 超快性能：即使面对大型数据集也能保持高效运行。

• 多项布局：支持一行中显示多个项目，非常适合应用于预订、资源管理、排程管理、多媒体编辑器等场景。

• 树状结构：支持可折叠/展开的分组。

• 可移动/可调整大小的元素：能够灵活配置当前哪些元素可以移动，以及如何移动。

• 安全的 HTML 模板：保证代码安全性。

• 对齐功能：调整大小或移动时可自动吸附到指定时间点。

• 模板与插槽支持：轻松更改每个组件的 HTML 内容。

• 背景网格：可在其上放置自定义 HTML 内容。

• 可选择的单元格与项目：支持动态配置当前可选择的内容范围。

• 渐进式时间缩放：精确到秒级别的缩放功能。

• 可调整大小的列表列：实时调整列宽。

• 可排序与可搜索的列表列：支持数据列表的动态排序和搜索。

• 基于 BEM 的 CSS 规则：外观样式易于定制。

• 兼容第三方库：支持轻松集成。

• 高度可配置：满足多样化需求。

• 移动端优化：适配移动设备。

• 支持夏令时 (DST)：自动调整时间。

• 插件支持：扩展功能更加方便。

• 视觉吸引力强：界面设计美观。

• 采用 TypeScript 编写：代码更安全更规范。

• 离线授权：购买后可使用离线授权密钥。

快速安装

环境安装

npm i gantt-schedule-timeline-calendar

<script src="https://cdn.jsdelivr.net/npm/gantt-schedule-timeline-calendar/dist/gstc.wasm.umd.min.js"></script>

基本用法

import GSTC from "gantt-schedule-timeline-calendar";

/**
 * In a TypeScript environment, you can import types directly:
 * import { Config } from 'gantt-schedule-timeline-calendar';
 * const config: Config = {...};
 */
/**
 * @type { import("gantt-schedule-timeline-calendar").Config }
 */
const config = {
  /* ... */
};

// Generate GSTC state from configuration object
const state = GSTC.api.stateFromConfig(config);

const element = document.getElementById("your-element");
if(!element) throw new Error("Element not found");

// Create an instance and mount the component
const gstc = GSTC({
  element,
  state,
});

在线预览

https://gantt-schedule-timeline-calendar.neuronet.io/

开源地址

https://github.com/neuronetio/gantt-schedule-timeline-calendar?tab=readme-ov-file