效果图是这样,下面开始代码操作
cmd 中或bash中插入 npm i dhtmlx-gantt。npm先安装这个组件

npm i dhtmlx-gantt

现在创建甘特图组件,@src\components\Gantt

一级目录 SRC

二级目录 components

下面是文件目录截图,需要创建index.vue文件

4.index.vue 内容 内联代码片。

index.vue内容，可自行修改

<template><div class="gantt_control"><div ref="gantt" style='width:100%; height:90%'  ></div></div>
</template><script>
import {gantt} from 'dhtmlx-gantt'
export default {name: 'gantt',props: {tasks: {type: Object,default () {return {data: [], user: [],userGroups:[],type:1}}},},mounted: function () {gantt.locale={date: {month_full: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],month_short: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],day_full: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],day_short: ["日", "一", "二", "三", "四", "五", "六"]},labels: {dhx_cal_today_button: "今天",day_tab: "日",week_tab: "周",month_tab: "月",new_event: "新建日程",icon_save: "保存",icon_cancel: "关闭",icon_details: "详细",icon_edit: "编辑",icon_delete: "删除",confirm_closing: "请确认是否撤销修改!", //Your changes will be lost, are your sure?confirm_deleting: "是否删除日程?",section_description: "描述",section_time: "时间范围",section_type: "类型",/* grid columns */column_text: "任务名",column_start_date: "开始时间",column_end_date: "结束时间",column_duration: "周期",column_add: "",/* link confirmation */link: "关联",confirm_link_deleting: "将被删除",link_start: " (开始)",link_end: " (结束)",type_task: "任务",type_project: "项目",type_milestone: "里程碑",minutes: "分钟",hours: "小时",days: "天",weeks: "周",months: "月",years: "年"}}gantt.config.xml_date = "%Y-%m-%d %H:%i";gantt.plugins({quick_info: true,grouping:true,});gantt.templates.task_class = function (start, end, task) {switch (task.task_status) {case 2:if(task.is_timeout==1 ){return "two timeout"}else{return "two ";}break;case 3:if(task.is_timeout==1){return "three timeout"}else{return "three ";}break;case 4:if(task.is_timeout==1){return "four timeout"}else{return "four ";}break;case 5:if(task.is_timeout==1){return "five timeout"}else{return "five ";}break;default:return "one"break;}};gantt.templates.grid_row_class = function (start_date, end_date, item) {if (item.is_task == 2) return "bug";};gantt.config.grouping = true;function byId(list, id) {for (var i = 0; i < list.length; i++) {if (list[i].key == id)return list[i].label || "";}return "";}gantt.attachEvent('onTaskDblClick', (id) => {let task = gantt.getTask(id);this.$emit('task-dblclicked', task);
});gantt.serverList("stage",this.$props.tasks.stage);gantt.serverList("user",this.$props.tasks.user);gantt.serverList("userGroups", this.$props.tasks.userGroups);gantt.serverList("data", this.$props.tasks.data);// 列gantt.config.columns = [{ name: "text", label: "任务名称", tree: true},{ name: "user", width: 200, label: "用户", align: "center", template: function (item) {return byId(gantt.serverList('user'), item.user)}}];gantt.init(this.$refs.gantt);gantt.sort("start_date");gantt.parse(this.$props.tasks)},
watch: {tasks: {handler(newvalue,oldvalue){this.$props.tasks.data = newvalue.dataif(this.$props.tasks.type==2){this.groups()}else{this.getUser()}},deep:true,immediate:false}},methods: {groups(){gantt.clearAll()gantt.refreshData()gantt.serverList("user",this.$props.tasks.user);gantt.serverList("userGroups", this.$props.tasks.userGroups);gantt.serverList("data", this.$props.tasks.data);this.showGroups('userGroups')gantt.parse(this.$props.tasks)},getUser(){gantt.clearAll()gantt.refreshData()console.log(this.$props.tasks.stage)console.log(this.$props.tasks)gantt.serverList("stage",this.$props.tasks.stage);this.showGroups("stage")gantt.parse(this.$props.tasks);},showGroups(listname) {if (listname) {var relation = listname == 'userGroups' ? 'user' : listname;gantt.groupBy({groups: gantt.serverList(listname),relation_property: relation,group_id: "key",group_text: "label"});gantt.sort("start_date");} else {gantt.groupBy(false);}},},
}
</script><style lang="scss">@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";.gantt_cal_light{display: none;visibility:hidden}.gantt_add{display: none;}.userGroup{padding-left: 10px;}.gantt_cal_quick_info{display: none;}.gantt_grid_head_add {display: none;}.nested_task .gantt_add{display: none !important;
}
.gantt_message_area {display: none;
}.gantt_delete_btn_set{display: none;
}.summary-row,.summary-row.odd {background-color: #EEEEEE;font-weight: bold;}.gantt_grid div,.gantt_data_area div {font-size: 12px;}.summary-bar {opacity: 0.4;}.gantt_control{text-align: center;height: 30px;.groups{height: 100%;cursor: pointer;margin-left: 10px;color: #fff;border-radius: 2px;background-color: #3db9d3;border: 1px solid #2898b0;}}.one{background-color: #3db9d3;}.timeout{border:3px solid red;}.two {background-color: #fff;//进行中}.two .gantt_task_progress{background: #FFFF00;}.three {background-color: #fff;//暂停}.three .gantt_task_progress{background: #FFC000;}.four{background-color: #fff;}.four .gantt_task_progress{background: #00B0F0;}.five {background-color: #fff;//完成}.five .gantt_task_progress {background: #00B050;}.gantt_task_content{color:#000}.bug .gantt_cell, .odd.red .gantt_cell,.bug .gantt_task_cell, .odd.red .gantt_task_cell {background-color: #FDE0E0;}</style>

5.注释信息注释。

 //gantt.locale  主要设置时间轴的相关信息 //gantt.config 主要是是配置信息，如需要的时间格式,等//gantt.plugins({quick_info: true,grouping:true,}); 主要是启用某些包的插件，如这里的group是分组//gantt.templates.task_class  主要给 任务添加class类 比如要增加颜色 和 进度颜色//grid_row_class 给侧边栏添加class//gantt.attachEvent 添加自定义事件//gantt.config.columns 列值得定义//  gantt.init(this.$refs.gantt) 初始化//gantt.sort 排序// gantt.parse(this.$props.tasks) 应该是填充入参数

//config
参考index.vue

引入index.vue组件下面展示一些 引入组件。

//taskDblClick 双击事件触发
//logTaskUpdate 任务更新触发
//logLinkUpdate 连接线更新触发
//selectTask 任务选择触发

// js
import Gantt from '@/components/Gantt';//html<gantt class="ganttle-container"  ref="ganttchart"  :tasks="tasks"  @task-dblclicked="taskDblClick"   @task-updated="logTaskUpdate" @link-updated="logLinkUpdate"  @task-selected="selectTask" ></gantt>

更多的API参考https://docs.dhtmlx.com/gantt/api__gantt_refreshdata.html

element ui加入甘特图相关推荐

element ui el-carousel 滚动图 vue 基于vue-lazyload图片懒加载、延迟加载解决方案
vue-lazyload插件github地址:https://github.com/hilongjw/vue-lazyload#requirements 效果是默认不加载图片,先用一个占位符图来代替, ...
element UI和阿里图标图iconfont冲突怎么办
最近遇到elementui项目引入阿里图标库后,预览时候部分图标会出现显示的不是自己想要的图标: 例如原先应该显示elementui图标但是显示的是阿里图标库的图标,很是头疼: 找了一天没找到解决方案 ...
在vue中element ui 结合frappe-gantt实现一个简单的甘特图功能
在vue中创建甘特图步骤请参考: https://editor.csdn.net/md/?articleId=130145782 2. 结合element ui 实现甘特图功能实现效果: 2.1 下 ...
dhtml gantt所有配置_甘特图dhtmlxGantt使用教程：如何快速设置内联编辑器和编辑JavaScript Gantt数据...
dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表.可满足项目管理应用程序的所有需求,是最完善的甘特图图表库.它允许你创建动态甘特图,并以一个方便的图形化方式可视化项目进度 ...
响应式滚动图懒加载 element ui el-carousel 组件优化代码
响应式滚动图懒加载 element ui el-carousel 组件优化代码懒加载插件vue-lazyload //main.js import VueLazyload from 'vue-la ...
vue element ui 走马灯轮播图（简单几句话实现自动缩放效果）
实现效果 element ui 简单实现轮播图本文,中间叙述的是过程,完整代码在最后面. 最近在写公司官网,用的是element ui 走马灯组件写的轮播图,ui想要自动缩放的效果,如上视频.在这里 ...
vue + element 甘特图
参考地址:https://github.com/hql7/wl-gantt 安装:npm i wl-gantt --save 或 npm i wl-gantt -S 无需自定义时可用: 配置文件: i ...
莱诺和柯南Excel甘特图
Rumours say that the late night TV schedule on NBC will change. Jay Leno will leave his 10 PM spot, ...
charts混合使用 elementui和e_vue模块化(echart+element ui)
最近看了下vue的框架,随手做了个项目,记录分享下技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图主要是配置 ...

element ui加入甘特图

一级目录 SRC

二级目录 components

三级目录需要创建目录Gantt

element ui加入甘特图相关推荐

最新文章

热门文章

element ui加入甘特图

一级目录 SRC

二级目录 components

三级目录 需要创建目录Gantt

element ui加入甘特图相关推荐

最新文章

热门文章

三级目录需要创建目录Gantt