DHTMLX Gantt（甘特图resize有效）+vue框架的使用方法

最新推荐文章于 2024-07-27 05:30:00 发布

菜菜很阳光

最新推荐文章于 2024-07-27 05:30:00 发布

阅读量1.6k

点赞数 1

文章标签： vue.js javascript npm

本文链接：https://blog.csdn.net/weixin_43875471/article/details/117064367

版权

本文档介绍了如何在Vue项目中集成DHTMLX Gantt组件，包括安装npm包dhtmlx-gantt，创建封装好的gantt.vue组件，以及在ganttIndex.vue中使用该组件的方法。

摘要由CSDN通过智能技术生成

DHTMLX Gantt（甘特图resize有效）+vue框架的使用方法

官网demo参照地址：
1.下载依赖
npm install dhtmlx-gantt --save
2.创建一个gantt.vue画面（封装gantt组件）

<template>
  <div ref="gantt" class="left-container" ></div>
</template>
<script>
import {
     gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
export default {
    
  name: "gantt",
  props: {
    
    tasks: {
    
      type: Object,
      default() {
    
        return {
     data: [], links: [] };
      }
    }
  },
  mounted: function() {
    
  gantt.config.auto_types = true;
	gantt.config.columns = [
		{
    name: "text", label: "Task name", tree: true, width: 170,resize:true},
		{
    name: "start_date", align: "center", width: 90,resize:true},
		{
    name: "duration", align: "center", width: 60,},
		{
    name: "add", width: 40}
	];
  gantt.config.layout = {
    
    css: "left-container",
    rows:[
      {
    
        cols: [
          {
    view: "grid", id: "grid", scrollX:"scrollHor", scrollY:"scrollVer"},
          {
    resizer: true, width: 1},
          {
    view: "timeline", id: "timeline", scrollX:"scrollHor", scrollY:"scrollVer"},
          {
    view: "scrollbar", scroll: "y", id:"scrollVer"}
        ]
       },
      {
    view: "scrollbar", scroll: "x", id:"scrollHor", height