基于Vue+Gantt构建甘特图组件

今天给大家分享如何在Vue项目中实现甘特图插件。

基于 Vue Gantt 构建甘特图组件

基于dhtmlx-gantt插件来实现在vue.js项目中创建甘特图。

基于 Vue Gantt 构建甘特图组件

安装依赖

首先需要安装 dhtmlx-gantt 模块。

$ npm i dhtmlx-gantt -S

创建gantt.vue

新建gantt.vue页面,并加入以下代码。

export default {
  name: \'app\',
  components: {Gantt},
  data () {
    return {
      tasks: {
        data: [
        {
			text: \'Test001-001\',//任务名
			start_date: \'19-04-2017\',//开始时间
			id: 1,//任务id
			duration: 13,//任务时长,从start_date开始计算
			progress: 0.6,//任务完成情况,进度
			parent: 2,//父任务ID
			user: "李四",//成员
			planned_end:\'19-04-2017\', //计划开始时间
			planned_start:\'10-04-2017\',//计划结束时间
			show:false,
			open: true,//默认是否打开
			type: \'project\'// gantt.config.types.milestone为里程碑类型
			        // project为项目任务类型,也就是摘要任务,
			        // task为普通任务类型
			},
          {id: 2, text: \'Task #1\', start_date: \'15-04-2017\', duration: 3, progress: 0.6},
          {id: 3, text: \'Task #2\', start_date: \'18-04-2017\', duration: 3, progress: 0.4}
        ],
        links: [// links为任务之间连接的线
          {id: 1, source: 1, target: 2, type: \'0\'}//source根源 target目标 也就是从id为1的指向id为2的
        //type:\'0\'是从1任务完成到2任务开始,type:\'1\'是1任务开始到2任务开始,
        //type:\'2\'是从1任务完成到2任务完成,type:\'3\'是从1任务开始到2任务完成
        ]
      },
    }
  }
}
基于 Vue Gantt 构建甘特图组件

当然,大家也可以把 gantt.vue 封装为一个公共组件,只需传入tasks参数即可。

DHX官网提供了丰富的Vue组件示例。

https://dhtmlx.com/docs/products/dhtmlxGantt-for-Vuejs/
基于 Vue Gantt 构建甘特图组件
基于 Vue Gantt 构建甘特图组件
基于 Vue Gantt 构建甘特图组件

在vue.js中详细使用dhtmlxGantt插件创建甘特图,可参看下面的demo文档。

https://dhtmlx.com/blog/use-dhtmlxgantt-vue-js-framework-demo/

ok,今天就分享到这里。感兴趣的同学可以去看看,希望对大家有所帮助!

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/procedure/13143.html

发表评论

登录后才能评论