vue甘特图

最新推荐文章于 2025-06-30 14:04:41 发布

吉米多维奇

最新推荐文章于 2025-06-30 14:04:41 发布

阅读量7.3k

点赞数

文章标签：甘特图 vue

本文介绍如何通过Vue.js结合dhtmlx-gantt库来实现甘特图组件，并展示了如何配置基本的任务和链接数据来展示一个简单的甘特图实例。

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

npm install dhtmlx-gantt --save

安装甘特图到自己的项目内

之后可以创建一个vue文件

<template>
  <div ref="gantt"></div>
</template>

<script>
import 'dhtmlx-gantt'
export default {
  name: 'gantt',
  props: {
    tasks: {
      type: Object,
      default () {
        return {data: [], links: []}
      }
    }
  },

  mounted: function () {
    gantt.init(this.$refs.gantt)
    gantt.parse(this.$props.tasks)
  }
}
</script>

<style>
    @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>

打开App.vue并添加以下代码

<template>
  <div class="container">
    <gantt class="left-container" :tasks="tasks"></gantt>
  </div>
</template>

<script>
import Gantt from './components/Gantt.vue';

export default {
  name: 'app',
  components: {Gantt},
  data () {
    return {
      tasks: {
        data: [
          {id: 1, text: 'Task #1', start_date: '15-04-2017', duration: 3, progress: 0.6},
          {id: 2, text: 'Task #2', start_date: '18-04-2017', duration: 3, progress: 0.4}
        ],
        links: [
          {id: 1, source: 1, target: 2, type: '0'}
        ]
      },
    }
  }
}
</script>
我们应该在页面上能够看到带有预定义任务的甘特图，如果没有可以在标签上添加高度