dhtmlxGantt 在vue中使用样例，实现了自定义弹窗、设置横道图颜色、修改列表样式、表单验证等。

效果：

官网样例：https://docs.dhtmlx.com/gantt/samples/

官方文档：https://docs.dhtmlx.com/gantt/api__refs__gantt.html

<template>
  <div style="height:500px">
    <div ref="gantt" style="height:100%"></div>
  </div>
</template>
<script>
import {gantt} from 'dhtmlx-gantt';
import moment from "moment"
export default {
  name: 'gantt',
  props: {
    tasks: {
      type: Object,
      default () {
        return {data: [], links: []}
      }
    }
  },
  data(){
    return {
      title:'',
      width:800,
      visible: false,
      disablesubmit: false
    }
  },
  mounted: function () {
    //日期格式化
    gantt.config.xml_date = "%Y-%m-%d";
    //左侧是否自适应
    gantt.config.autofit = true;
    //左侧宽
    gantt.config.grid_width = 500;
    //取消连线
    gantt.config.drag_links = false;
    //只读
    gantt.config.readonly = false;
    //右侧显示列名
    gantt.config.date_scale = "%Y-%m-%d";
    //自动调整图表坐标轴区间用于适配task的长度
    gantt.config.fit_tasks = true; 
    //弹窗宽
    gantt.config.wide_form = false;
    //汉化
    gantt.locale={
      date: {
          month_full: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
          month_short: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
          day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
          day_short: ["日", "一", "二", "三", "四", "五", "六"]
      },
      labels: {
        dhx_cal_today_button: "今天",
        day_tab: "日",
        week_tab: "周",
        month_tab: "月",
        new_event: "新建日程",
        icon_save: "保存",
        icon_cancel: "关闭",
        icon_details: "详细",
        icon_edit: "编辑",
        icon_delete: "删除",
        confirm_closing: "请确认是否撤销修改!", //Your changes will be lost, are your sure?
        confirm_deleting: "是否删除计划?",
        section_description: "描述:",
        section_time: "时间范围:",
        section_type: "类型",
        section_text: "计划名称:",
        section_color: "颜色:",

        /* grid columns */

        column_text: "计划名称",
        column_start_date: "开始时间",
        column_duration: "持续时间",
        column_add: "",

        /* link confirmation */

        link: "关联",
        confirm_link_deleting: "将被删除",
        link_start: " (开始)",
        link_end: " (结束)",

        type_task: "任务",
        type_project: "项目",
        type_milestone: "里程碑",

        minutes: "分钟",
        hours: "小时",
        days: "天",
        weeks: "周",
        months: "月",
        years: "年"
    }
    }
    //左侧显示列名
    gantt.config.columns=[
        {name:"text",       label:"计划名称",  tree:true, width:'*' },
        {name:"start_date", label:"开始时间", align: "center" },
        {name:"end_date", label:"结束时间", align: "center" },
        {name:"progress",   label:"进度" , align: "center",
          template:function(obj){
            return (Math.floor(obj.progress*100)).toString()+'%'
          }
        },
        {name:"add",        label:"" },
    ];
    //弹出层
    gantt.config.lightbox.sections = [
        {name:"text", height:70, map_to:"text", type:"textarea",focus:true,width:200},                                                                     
        {name:"time", height: 30, map_to:"auto", type:"time", time_format: ["%Y", "%m", "%d"]},
        {name:"color", height:30, map_to:"color", type:"select", options: [ 
          {key:"#3db9d3", label: "蓝色"},
          {key:"#33cc33", label: "绿色"},                                               
          {key:"#FF8247", label: "橙色"},                                             
          {key:"#ff6633", label: "红色"}                                                 
        ]},
        {name:"description", height:70, map_to:"description", type:"textarea"}
    ];
    //弹窗标题 日期范围
    gantt.templates.task_time = function(start,end,task){
      return moment(start).format('YYYY-MM-DD')+" - "+moment(end).format('YYYY-MM-DD');
    };
    //弹窗标题 计划名称
    gantt.templates.task_text=function(start, end, task){
      return task.text;
    };
    gantt.init(this.$refs.gantt);
    gantt.parse(this.$props.tasks);
    let this_ = this
    //添加后触发
    gantt.attachEvent("onAfterTaskAdd", function(id,item){
      console.log("添加后触发");
      this_.changeTask();
    });
    //移动进度后触发
    gantt.attachEvent("onAfterTaskDrag", function(id, mode, e){
      console.log("移动进度后触发");
      this_.changeTask();
    });
    //移动任务后触发
    gantt.attachEvent("onAfterTaskMove", function(id, parent, tindex){
      console.log("移动任务后触发");
      this_.changeTask();
    });
    //删除任务后触发
    gantt.attachEvent("onAfterTaskDelete", function(id,item){
      console.log("删除任务后触发");
      this_.changeTask();
    });
    //修改任务后触发
    gantt.attachEvent("onAfterTaskUpdate", function(id,item){
      console.log("修改任务后触发");
      this_.changeTask();
    })
    //保存验证
    gantt.attachEvent("onLightboxSave", function (id, item) {
      if (!item.text) {
        gantt.message({type: "error", text: "请填写计划名称!"});
        return false;
      }
      return true;
    });
  },
  methods: {
      changeTask(){
        const taskCount = gantt.getTaskCount();
        let taskData = [];
        let openTask = [];
        for(let i = 0; i < taskCount; i++){
          let taskOne = {}
          const obj = gantt.getTaskByIndex(i);
          //打开状态继续打开
          if(obj.$open==true){
            openTask.push(obj.id)
          }
          //整理数据格式
          taskOne.id = obj.id;
          taskOne.text = obj.text;
          taskOne.start_date = moment(obj.start_date).format('YYYY-MM-DD');
          taskOne.end_date = moment(obj.end_date).format('YYYY-MM-DD');
          taskOne.duration = obj.duration;
          taskOne.progress = obj.progress;
          taskOne.description = obj.description;
          taskOne.color = obj.color;
          if(obj.parent){
            taskOne.parent = obj.parent;
          }
          taskData.push(taskOne);
        }
        this.$props.tasks.data = taskData;
        //清空数据
        gantt.clearAll();
        //加载
        gantt.parse(this.$props.tasks);
        //遍历打开，使之前打开的父级继续打开
        openTask.forEach(id => {
          gantt.open(id);
        });
      }
    }
}
</script>
 
<style>
    @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>