Vue 甘特图 gantt 安装使用（dhtmlx-gantt）

原创

已于 2024-03-19 16:51:27 修改 · 4.9k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #甘特图 #前端

于 2024-01-30 14:32:01 首次发布

Vue 甘特图 gantt 安装使用

(gantt-elastic)参考文章@shenjuncaci

(dhtmlx)参考文章@秃头的铲屎官

dhtmlx@官方文档

安装

npm i dhtmlx-gantt

使用

创建一个容器

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

引入依赖

import { gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

初始化及数据解析

        //  初始化
          gantt.init(this.$refs.gantt)
          //  数据解析
          gantt.parse(this.tasks)

其他配置可根据自己需求参考官网添加。

dhtmlx 实操案例 (简易 demo)

<template>
  <div class="container">
    <div class="select-wrap">
      <el-select v-model="value" placeholder="请选择" @change="selectChange">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div ref="gantt" class="gantt-container"></div>
  </div>
</template>
<script>
  import {
     
      gantt } from "dhtmlx-gantt";
  import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

  export default {
     
     
    name: "gantt",
    data() {
     
     
      return {
     
     
        tasks: {
     
     
          data: [],
        },
        options: [
          {
     
     
            value: "1",
            label: "全部",
          },
          {
     
     
            value: "2",
            label: "完成",
          },
          {
     
     
            value: "3",
            label: "正常",
          },
          {
     
     
            value: "4",
            label: "异常",
          },
          {
     
     
            value: "5",
            label: "未启动",
          },
        ],
        value: "1",
      };
    },
    methods: {
     
     
      //开始时间-结束时间参数
      DateDifference: function (strDateStart, strDateEnd) {
     
     
        var begintime_ms = Date.parse(
          new Date(strDateStart.replace(/-/g, "/"))
        ); //begintime 为开始时间
        var endtime_ms = Date.parse(new Date(strDateEnd.replace(/-/g, "/"))); // endtime 为结束时间
        var date3 = endtime_ms - begintime_ms; //时间差的毫秒数
        var days = Math.floor(date3 / (24 * 3600 * 1000));
        return days;
      },
      initData: function () {
     
     
        this.tasks.data = [
          {
     
     
            id: 1,
            text: "概念设计",
            start_date: "2020-04-08",
            duration: 10,
            open: true, //默认打开，
            toolTipsTxt: "xxx项目概念设计",
            progress: 0.6,
            status: "parent",
          },
          {
     
     
            toolTipsTxt: "xxx项目-项目启动会",
            text: "项目启动会-外部", // 任务名
            start_date: "2020-04-08", // 开始时间
            id: 11, // 任务id
            duration: 3, // 任务时长，从start_date开始计算
            parent: 1, // 父任务ID
            type: 1,
            progress: 0.5,
            status: "yellow",
          },
          {
     
     
            toolTipsTxt: "xxx项目-项目启动会议",
            text: "项目启动会-内部",
            start_date: "2020-04-11",
            id

最低0.47元/天解锁文章