vue.js中使用甘特图（gantt-elastic）的使用

最新推荐文章于 2025-04-10 08:31:03 发布

m0_67401382

最新推荐文章于 2025-04-10 08:31:03 发布

阅读量7.8k

点赞数 7

分类专栏：前端 html 文章标签： vue.js 甘特图 npm

本文链接：https://blog.csdn.net/m0_67401382/article/details/123368528

版权

本文介绍在Vue.js项目中如何使用gantt-elastic插件进行任务进度跟踪。在详细阐述安装过程、代码导入、任务设置及选项配置的同时，分享了在缺乏官方文档的情况下，通过研究源码解决配置问题的经验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue中使用甘特图（gantt-elastic）做进度跟踪
公司要使用甘特图插件来跟踪任务的进度，在使用这个插件的过程中踩了太多的坑了，很多配置都没有文档的连英文文档都没有，然后就看了源码研究了下具体的配置，具体的配置我都在下面的文章中截图有备注了。如果说有什么问题给我留言我这边会在看到的第一时间回复。

一、首先要安装gantt-elastic这个插件
在npm官网上下载 https://www.npmjs.com/package/gantt-elastic
npm install --save gantt-elastic
npm install --save gantt-elastic-header
gantt-elastic-header 这个可以按照需求安装
甘特图的展示
二、安装之后在代码中使用
html的使用
1.要 import GanttElastic from “gantt-elastic”;
import dayjs from “dayjs”;
import GanttHeader from “gantt-elastic-header”;//这个根据需求引入

2、设置tasks
tasks设置
4、options设置

5、方法的调用
在这里插入图片描述

三、具体的代码

<template>
    <div  >
        <gantt-elastic
            v-show="showGantt"
            :options="options"
            :tasks="tasks"
            @tasks-changed="tasksUpdates" 
             @options-changed="optionsUpdate"
            @dynamic-style-changed="styleUpdate"
            >
        </gantt-elastic>
      
            <!-- -->
    </div>
</template>

<style>
</style>
<script>
import GanttElastic from "gantt-elastic";
import dayjs from "dayjs";
// import GanttHeader from "gantt-elastic-header";

//tasks是数据 真实的项目需要接口赋值数据
let that
let options = {
      taskMapping: {
        progress: "percent"
      },
      maxRows: 10, 
      maxHeight: 500,
      // title: {
      //   label: "Your project title as html (link or wh

最低0.47元/天解锁文章