使用dhtmlxGantt（在vue中）

安装

npm install dhtmlx-gantt

编码

新建一个gantt.vue文件

<template>
    <div style="height:62vh;" ref="gantt"></div>
</template>

<script>
  import 'dhtmlx-gantt';
  import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'; // 引入样式
  export default {
      name: 'gantt',
      props: {
          tasks: {
              type: Object,
              default () {
                  return {data: [], lists: []}
              }
          }
      },
      mounted: function() {
          // gantt.config.drag_progress = false; // 允许用户推拽条形图上用来调整进度百分比的小按钮
          // gantt.config.drag_resize = false; // 允许用户通过拖拽任务的条形图的两端来改变工期
          // gantt.config.drag_move = false; // 允许用户拖动条形图来改变位置
          gantt.config.readonly = true; // 只读
          gantt.config.columns = [
            {name: 'text', label: '项目', align: 'center'},
            {name: 'start_date', label: '开始时间', align: 'center'},
          ]
          gantt.init(this.$refs.gantt)
          gantt.parse(this.$props.tasks)
      }
  }
</script>

使用

在对应文件中引入组件，并使用

<Gantt :tasks="tasks"></Gantt>

data()中：

// 甘特图数据
      tasks: {
        data: [
          {id: 1, text: 'task #1', start_date: '15-8-2021', duration: 3, progress: 0.6},
          {id: 2, text: 'task #2', start_date: '23-8-2021', duration: 3, progress: 0.5},
          {id: 3, text: 'task #3', start_date: '20-8-2021', duration: 3, progress: 0.6},
        ]
      },

效果

设置了只读，并且重新定义了columns，就不会有“+”在列中，也不能添加删除任务。

英文文档：docs.dhtmlx.com/gantt/api__…

DHTMLX-GANTT（甘特图配置）：blog.csdn.net/qq_24472595…