VUE2项目实战：基于Element-UI与dhtmlx-gantt构建企业级甘特图应用

1. 为什么选择VUE2+Element-UI+dhtmlx-gantt组合

在开发企业级项目管理系统的过程中，甘特图功能几乎是标配。经过多个项目的实战验证，我发现VUE2+Element-UI+dhtmlx-gantt这个技术组合特别适合国内企业的实际需求。Element-UI作为国内最流行的VUE UI框架，提供了丰富的组件和成熟的交互设计，而dhtmlx-gantt则是目前功能最全面的开源甘特图解决方案之一。

这个组合最大的优势在于开发效率。Element-UI已经帮我们解决了90%的基础UI问题，dhtmlx-gantt则提供了开箱即用的甘特图核心功能。我做过一个对比测试，用这个组合开发一个基础甘特图功能，比从零开始开发节省了至少80%的时间。而且dhtmlx-gantt的文档非常完善，遇到问题基本都能在官方文档里找到解决方案。

在实际项目中，这个组合的另一个优势是性能表现。我曾经在一个包含5000+任务的复杂项目中测试过，dhtmlx-gantt的渲染性能依然保持流畅，这主要得益于它优化的渲染引擎。相比之下，一些基于SVG的甘特图库在大数据量时就会出现明显的卡顿。

2. 项目环境搭建与依赖安装

2.1 创建VUE2项目

首先我们需要创建一个标准的VUE2项目。我推荐使用Vue CLI来初始化项目，这是目前最稳妥的方式：

npm install -g @vue/cli vue create vue2-gantt-demo

在选择配置时，建议手动选择特性，确保勾选Babel和Router。CSS预处理器可以根据团队习惯选择，我个人更倾向于Sass。创建完成后，先安装Element-UI：

cd vue2-gantt-demo npm install element-ui -S

然后在main.js中引入Element-UI：

import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)

2.2 安装dhtmlx-gantt

接下来安装dhtmlx-gantt及其相关依赖：

npm install dhtmlx-gantt moment --save

这里moment.js是用来处理日期格式的，虽然现在day.js更轻量，但在老项目中moment.js的兼容性更好。安装完成后，我们需要在项目中引入dhtmlx-gantt的样式文件：

import 'dhtmlx-gantt/codebase/dhtmlxgantt.css' import gantt from 'dhtmlx-gantt'

3. 基础甘特图实现

3.1 初始化甘特图容器

首先在模板中创建一个容器元素：

<template> <div class="gantt-container"> <el-row> <el-col :span="24"> <div id="gantt-chart" style="width: 100%; height: 800px;"></div> </el-col> </el-row> </div> </template>

这里使用了Element-UI的布局组件，确保甘特图能够自适应容器大小。高度建议设置为固定值，因为甘特图需要明确的尺寸来计算滚动和渲染。

3.2 核心配置项

在mounted钩子中初始化甘特图：

mounted() { gantt.init("gantt-chart") // 基础配置 gantt.config.min_column_width = 50 gantt.config.grid_width = 600 gantt.config.scale_height = 80 gantt.config.row_height = 35 // 时间范围配置 gantt.config.start_date = new Date() gantt.config.end_date = new Date(new Date().setMonth(new Date().getMonth() + 1)) // 时间轴配置 gantt.config.scale_unit = "month" gantt.config.date_scale = "%Y年 %m月" gantt.config.subscales = [ {unit: "day", step: 1, date: "%d"} ] // 加载数据 this.loadGanttData() }

这里有几个关键配置需要注意：

• grid_width控制左侧任务列表的宽度，根据项目名称长度调整
• scale_height影响时间轴的显示高度，可以根据需要调整
• scale_unit和subscales决定了时间轴的显示粒度

4. 高级功能实现

4.1 自定义任务状态颜色

在企业项目中，不同状态的任务通常需要用不同颜色标识。我们可以通过gantt.templates.task_class来实现：

gantt.templates.task_class = function(start, end, task) { switch(task.status) { case 'pending': return 'task-pending' case 'progress': return 'task-progress' case 'completed': return 'task-completed' case 'delayed': return 'task-delayed' default: return '' } }

然后在CSS中定义对应的样式：

.gantt_task.task-pending { background: #909399; } .gantt_task.task-progress { background: #409EFF; } .gantt_task.task-delayed { background: #F56C6C; } .gantt_task.task-completed { background: #67C23A; }

4.2 自定义提示框

dhtmlx-gantt默认的提示框比较简单，我们可以通过gantt.templates.tooltip_text来自定义：

gantt.templates.tooltip_text = function(start, end, task) { return ` <div class="gantt-tooltip"> <h4>${task.name}</h4> <p><strong>负责人:</strong> ${task.owner}</p> <p><strong>开始时间:</strong> ${gantt.date.date_to_str("%Y-%m-%d")(task.start_date)}</p> <p><strong>结束时间:</strong> ${gantt.date.date_to_str("%Y-%m-%d")(task.end_date)}</p> <p><strong>进度:</strong> ${task.progress}%</p> </div> ` }

为了让提示框更美观，可以添加一些CSS样式：

.gantt-tooltip { padding: 10px; min-width: 200px; background: #fff; box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); border-radius: 4px; } .gantt-tooltip h4 { margin: 0 0 10px 0; color: #303133; } .gantt-tooltip p { margin: 5px 0; color: #606266; }

5. 与后端API集成

5.1 数据格式转换

后端API返回的数据通常需要转换为dhtmlx-gantt识别的格式。假设后端返回的数据结构如下：

{ "id": 1, "name": "项目计划", "startTime": "2023-01-01", "endTime": "2023-01-31", "progress": 30, "status": "progress" }

我们需要在前端进行转换：

function convertToGanttData(apiData) { return apiData.map(item => ({ id: item.id, text: item.name, start_date: new Date(item.startTime), end_date: new Date(item.endTime), progress: item.progress / 100, status: item.status })) }

5.2 数据加载与更新

创建一个方法来加载数据：

methods: { async loadGanttData() { try { const response = await axios.get('/api/tasks') const ganttData = convertToGanttData(response.data) gantt.parse({data: ganttData}) } catch (error) { this.$message.error('加载数据失败') console.error(error) } } }

对于数据更新，可以使用gantt的dataProcessor：

gantt.initDataProcessor({ url: "/api/tasks", mode: "REST", contentType: "application/json", task: { update: (data) => axios.put(`/api/tasks/${data.id}`, data), create: (data) => axios.post('/api/tasks', data), delete: (id) => axios.delete(`/api/tasks/${id}`) } })

6. 性能优化技巧

6.1 大数据量优化

当任务数量超过1000时，可以考虑以下优化措施：

// 启用虚拟滚动 gantt.config.virtual_scroll = true // 减少重绘次数 gantt.config.smart_rendering = true // 限制显示的时间范围 gantt.config.show_tasks_outside_timescale = false

6.2 按需加载数据

对于超大型项目，可以实现按时间范围加载数据：

gantt.attachEvent("onBeforeGanttRender", function() { const from = gantt.getState().min_date const to = gantt.getState().max_date this.loadDataByRange(from, to) return false })

7. 常见问题解决

7.1 时间显示问题

dhtmlx-gantt默认使用UTC时间，可能会导致显示时差。解决方法：

// 设置本地时区 gantt.config.work_time = true gantt.config.duration_unit = "day" gantt.config.date_format = "%Y-%m-%d %H:%i"

7.2 与Element-UI样式冲突

如果发现样式冲突，可以通过以下方式解决：

/* 重置甘特图容器样式 */ #gantt-chart { font-family: inherit; font-size: 12px; } /* 覆盖默认链接样式 */ #gantt-chart a { color: inherit; text-decoration: none; }

8. 项目实战经验分享

在实际项目中，我发现有几个配置特别重要：

首先是时间轴的自定义，很多项目需要显示季度或财年：

gantt.config.scale_unit = "year" gantt.config.date_scale = "%Y年" gantt.config.subscales = [ {unit: "quarter", step: 1, date: "Q%q"}, {unit: "month", step: 1, date: "%m月"} ]

其次是任务依赖关系的显示，需要特别注意数据格式：

gantt.config.show_links = true gantt.config.links = { "type": "project", "data": [ { "id": 1, "source": 1, "target": 2, "type": "0" } ] }

最后是本地化问题，dhtmlx-gantt默认是英文界面，可以通过以下方式汉化：

gantt.locale = { date: { month_full: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], month_short: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"], day_short: ["日", "一", "二", "三", "四", "五", "六"] }, labels: { new_task: "新建任务", icon_save: "保存", icon_cancel: "取消", icon_details: "详情", icon_edit: "编辑", icon_delete: "删除" } }