Vue2中使用DHTMLX Gantt

在 Vue 2 项目中集成 DHTMLX Gantt 甘特图组件，可通过以下步骤实现。以下内容综合多个权威来源整理而成，涵盖安装、配置、数据绑定及常见问题解决方案：

一、安装依赖​

​1、安装核心包​

通过 npm 安装 DHTMLX Gantt：

npm install dhtmlx-gantt@^7.1.13  # 推荐兼容 Vue 2 的版本[3](@ref)

二、基础集成步骤​

​1. 组件初始化

<template>
  <div ref="ganttContainer" style="width: 100%; height: 600px;"></div>
</template>

<script>
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
import { gantt } from "dhtmlx-gantt"; // 从模块导入 gantt 对象[2,3](@ref)

export default {
  mounted() {
    this.initGantt();
  },
  methods: {
    initGantt() {
      // 初始化容器
      gantt.init(this.$refs.ganttContainer);
      
      // 加载示例数据
      const tasks = {
        data: [
          { id: 1, text: "项目计划", start_date: "2023-07-01", duration: 5 },
          { id: 2, text: "需求分析", start_date: "2023-07-02", duration: 3, parent: 1 }
        ],
        links: [] // 任务依赖关系
      };
      gantt.parse(tasks); // 解析数据并渲染[1,6](@ref)
    }
  }
};
</script>

2. 关键配置项

// 时间轴与日期格式
gantt.config.scale_unit = "day";       // 刻度单位（day/week/month）
gantt.config.step = 1;                // 单位间隔
gantt.config.date_scale = "%Y年%m月%d日"; // 日期显示格式[1,4](@ref)

// 任务条样式
gantt.config.row_height = 40;          // 行高
gantt.config.bar_height = 20;          // 任务条高度

// 国际化（中文支持）
gantt.i18n.setLocale("zh");            // 设置简体中文[2](@ref)

三、动态数据绑定​

​1. 从 API 加载数据

methods: {
  async loadData() {
    const res = await this.$axios.get("/api/tasks");
    gantt.clearAll();                 // 清除旧数据
    gantt.parse(res.data);            // 加载新数据[3,6](@ref)
  }
}

2. 响应父组件数据变化

props: ["tasks"], // 接收父组件数据
watch: {
  tasks(newTasks) {
    gantt.parse(newTasks); // 数据更新时自动刷新[6](@ref)
  }
}

四、事件与交互​

​1. 事件监听示例

mounted() {
  gantt.attachEvent("onTaskClick", (id, e) => {
    this.$emit("task-click", id); // 向父组件传递点击事件[6](@ref)
  });
  
  gantt.attachEvent("onAfterTaskAdd", (id, task) => {
    console.log("任务添加:", task);
  });
}

2. 任务操作（增删改）​

// 添加任务
gantt.addTask({ text: "新任务", start_date: "2023-07-10", duration: 2 });

// 删除任务
gantt.deleteTask(taskId);

// 更新任务
const task = gantt.getTask(taskId);
task.text = "修改后的名称";
gantt.updateTask(taskId);

五、常见问题解决

​1、容器渲染失败​

确保在 mounted 生命周期初始化，此时 DOM 已挂载

容器需明确设置宽高（如 style="width:100%;height:600px"）

​2、数据格式错误​

任务必须包含 id、text、start_date、duration

日期格式需统一（建议 YYYY-MM-DD）

​3、多语言不生效​

检查是否调用 gantt.i18n.setLocale("zh")

确保未覆盖语言包文件

​4、商业功能限制​

自动调度、关键路径计算等功能需企业版授权

社区版可满足基础甘特图需求

六、最佳实践建议​

​性能优化​：

超过 500 条任务时，启用虚拟滚动：

gantt.config.virtual_rendering = true; // 仅渲染可视区域[3](@ref)

样式覆盖​：

通过 CSS 自定义任务条颜色：

.gantt_task_line {
  background-color: #4CAF50 !important;
}

​版本兼容性​：

Vue 2 项目建议锁定版本 dhtmlx-gantt@7.1.x，避免新版不兼容。

通过以上步骤，可在 Vue 2 中快速实现功能完整的甘特图。如需复杂功能（如任务依赖线、资源视图），参考 DHTMLX Gantt 官方文档。