基于Vue 甘特图dhtmlxGantt配置

甘特图样例

自定义表头列
gantt.config.columns = [
      { name: "project_num", label: "项目编码", width: 80,align: "center"},
      { name: "project_type", label: "项目类别", width: 80, align: "center"},
      { name: "text", label: "项目名称", width: 100, align: "center" },
     // { name: "add", label: "" }, // ➕icon列显示 点击弹出添加框 隐藏没有
    ];

时间安排显示代码块
gantt.config.scale_unit = "year"; //第一个时间尺度，即X轴的单位，包括："minute", "hour", "day", "week", "month", "year"
gantt.config.step = 1;
gantt.config.date_scale="%Y";
gantt.config.start_date= new Date(2020,0,1) // 0代表1月 11代表12月
gantt.config.end_date= new Date(2025,11,31) // 0代表1月 11代表12月

// gantt.config.subscales = [ //第二个时间尺度单位
//         { unit: "day", step: 1, date: "%D" }
//     ];

data数据结构中 render 属性有无区别

数据结构
 data: [
          {
            id: 1, // 任务ID
            project_num:'p1',
            project_type:'项目一',
            text: "任务一",
            start_date: "03-04-2020", // 日-月-年 
            type: "project",
            render: "split",
            parent: 0, //父任务ID  自己为父任务 ID为0
          },
          {
            id: 2,
            text: "第一阶段",
            start_date: "03-04-2020", //开始时间
            end_date: "03-12-2020", //结束时间
            parent: 1,
          },
          {
            id: 3,
            text: "第二阶段",
            start_date: "12-12-2020",
            end_date: "12-12-2021",
            duration: 2,
            parent: 1,
            color:'green'
          },
          {
            id: 4,
            text: "第三阶段",
            start_date: "12-12-2022",
            end_date: "12-12-2023",
            duration: 1,
            parent: 1,
          },
          {
            id: 5,
            project_num:'p2',
            project_type:'项目二',
            text: "任务二",
            start_date: "12-12-2024",
            type: "project",
            render: "split",
            parent: 0,
          },
        ],

API 快速链接

• dhtmlxGantt API 任务样式配置 docs.dhtmlx.com/gantt/deskt…

www.jianshu.com/p/7039ca442… 代码环境基本准备
docs.dhtmlx.com/gantt/api__… dhtmlxGantt Api
blog.csdn.net/qq_18209125… dhtmlxGantt甘特图基本配置项 blog.csdn.net/ArthurWang7… DHTMLX Gantt 甘特图自定义样式