记录vue+dhtmlx-gantt开发甘特图

1. 安装dhtmlx-gantt; npm install dhtmlx-gantt
2. 查看文档, 设置config;不知道怎么设置的查看文档,链接:docs.dhtmlx.com/gantt/deskt…
3. 生成demo

甘特图配置:

gantt.config.readonly = true; 
gantt.config.columns = this.$props.columns;
gantt.config.autoscroll = true;
// 设置表头的高度
gantt.config.scale_height = 66;
gantt.config.xml_date = '%Y-%m-%d %H:%i';
// 表头设置
gantt.config.scales = [
  { unit: 'month', step: 1, format: '%Y年%m月' },
  { unit: 'day', step: 1, format: '%m/%d' },
  { unit: 'day', step: 1, format: dayFormat }
];
// 设置周末高亮
gantt.templates.timeline_cell_class = function(task,date){
  if(!gantt.isWorkTime({task: task, date: date})) return "weekend" ;
};
gantt.config.work_time = true;
gantt.init(this.$refs.gantt);
gantt.parse(this.$props.tasks);