Vue结合dhtmlx-gantt基础用法

关于一个刚入行的前端小白在公司项目的业务中使用到甘特图，小白也查阅了很多资料， 使用了很多甘特图组件但是唯一一个好用一点的模块就是DhtmlxGannt 具体用法如下

• 安装 npm i dhtmlx-gantt
• 模块导入

import gantt from "dhtmlx-gantt"; // 引入模块
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";    //引入甘特图样式

• 准备引入DOM

<template>
          <div class="box">
                <div ref="gantt" class="gantt-container" />
           </div>
</template>

• 样式

<style lang="less" scoped>
.gantt-container {
           height: 800px;
}
.box{  
          border-radius: 4px;
          height: 100%;
          background-color:#ddd;
          padding: 20px;         
}
</style>

• 准备mock数据

const tasks = {
    data: [
        { id: 1, text: '项目1', start_date: '2022-3-17', duration: 3, progress: 0.6 },
        { id: 2, text: '任务1', start_date: '2022-3-20', duration: 10, progress: 0.3,parent:1}
        { id: 3, text: '项目2', start_date: '2022-2-20', duration: 10, progress: 0.2 },
        { id: 4, text: '项目3', start_date: '2022-12-03', duration: 10, progress: 0.4 }
        { id: 5, text: '项目4', start_date: '2022-10-14', duration: 10, progress: 0.7 }
          ],
       links:[{ id: 1, source: 1, target: 1, type: "0" }],
}

• 挂载到DOM

    gantt.init(this.$refs.gantt); //这里可以通过ref挂载 或者 id选择器挂载
    gantt.parse(tasks);

• gantt配置(需要在init之前配置)

gantt.config.order_branch = true; //左边表格 列可以拖动排序

gantt.config.show_progress = false; //取消右边表格进度条显示与拖动

gantt.config.min_grid_column_width =180; //设置左侧表格宽度

gantt.i18n.setLocale("cn");//设置语音为中文

//自定义左侧 头部列的内容(方式1)
gantt.config.columns = [

{
    name: "text", //tasks参数名

    tree: true, //是否开始tree联级

    width: '*', //宽度 值为string 例如 width:"75"  "*" 为auto

    resize: true, //可重置大小

    label:'内容', //标签名

    template: function (obj) { return obj.text }, //返回值

    align: "center" //对齐方式
}

]//定义好之后需要数据tasks中也需要写与自定义label内容一致的数据

// 新增列(方式2)
        gantt.config.columns.push({
              name: "owner",
              label: "负责人",
              align: "center"
    });

更多配置项：blog.csdn.net/qq_18209125…

其他gantt自定义设置：www.evget.com/serializede…

文档：docs.dhtmlx.com/gantt/sampl…

• 销毁Gantt

destroyed () {
    gantt.destructor();
},