Dhtmlx Gantt 快速入门至精通

介绍

在一些任务计划、日程进度等场景中我们会使用到甘特图，Dhtmlx Gantt 对于甘特图的实现支持很友好，文档API介绍全面，虽然增强版的收费，但免费版的足以够用。

开箱使用

安装dhtml gannt插件

npm install dhtmlx-gantt

引入插件

//页面引入，如果多个页面使用可以全局引入
import gantt from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';

页面代码

<template>
  <el-container>
    <el-main style="padding: 0 20px; background-color: white">
      <div class="ganntClass" :style="{ height: ganttHeight }" v-loading="ganttLoading">
        <div ref="gantt" class="gantt-container" />
      </div>
    </el-main>
  </el-container>
</template>

<style scoped>
.gantt-container {
  height: 100%;
}
.ganntClass {
  background-color: #fff;
  padding: 10px;
  border-radius: 4px;
}
//今日标记样式
.today{
}
</style>

<script>
import gantt from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';

export default {
  data() {
    return {
      //gantt高度
      ganttHeight: innerHeight - 215 + 'px',
      ganttLoading: false,
      projectId: '',
      tasks: {
        data: []
      }
    };
  },
  created() {
    //清空gantt数据
    gantt.clearAll();
    this.projectId = this.$route.query.id;
    this.getProjectTaskData();
  },
  mounted() {
    var $this = this;
    //本地化