wlgantt：一个简单易用且高度可配置的甘特图进度计划项目管理插件

wl-gantt 外观简洁清爽&＃xff0c;非常简单易用&＃xff0c;高度可配置

jquery Gantt 笨重、老旧、较丑但文档还算清晰

js gantt 不想多说了

dhtmlxGantt 功能强大、全面&＃xff1b;但是使用难度高&＃xff0c;不切合现代框架及ui库&＃xff0c;很难在项目中完美应用

frappe-gantt 功能好少

bryntum 唯一较美观的&＃xff0c;但是可配置性差&＃xff0c;无法和组件结合;不校验源数据正确性就报错、崩溃;规则死板不符合项目使用&＃xff1b;收费年950$; 功能强大但文档只有简单介绍&＃xff0c;详细用法只能控制台打印

更新说明

2020-04-03 懒加载
2020-02-20 更新gantt&＃xff0c;详见版本说明1.0.1
2019-12-14 更新gantt&＃xff0c;增加内置前置任务列&＃xff0c;支持多选前置和单选前置&＃xff0c;并自动校验源数据前置任务合法性。
2019-12-3 更新gantt。1表格支持el-table大部分Attributes和Events,详细列表见下方&＃xff1b;2名称列增加nameFormatter格式化内容函数支持&＃xff1b;3日期列改为点击显示编辑输入框的形式。
2019-12-2 更新gantt.1日期支持yearAndMonth、monthAndDay、yearAndWeek类型&＃xff0c;详见版本记录1&＃xff1b;2修复部分时间更改情况不回调的问题。

已支持el-table参数及事件列表

:fit&＃61;"fit":size&＃61;"size":border&＃61;"border":data&＃61;"selfData":stripe&＃61;"stripe":height&＃61;"height":row-key&＃61;"rowKey":row-style&＃61;"rowStyle":class&＃61;"dateTypeClass":cell-style&＃61;"cellStyle":max-height&＃61;"maxHeight":tree-props&＃61;"selfProps":current-row-key&＃61;"rowKey":row-class-name&＃61;"rowClassName":cell-class-name&＃61;"cellClassName":expand-row-keys&＃61;"expandRowKeys":header-row-style&＃61;"headerRowStyle":header-cell-style&＃61;"headerCellStyle":default-expand-all&＃61;"defaultExpandAll":header-row-class-name&＃61;"headerRowClassName":highlight-current-row&＃61;"highlightCurrentRow":header-cell-class-name&＃61;"headerCellClassName"&＃64;header-contextmenu&＃61;"handleHeaderContextMenu"&＃64;selection-change&＃61;"handleSelectionChange"&＃64;row-contextmenu&＃61;"handleRowContextMenu"&＃64;current-change&＃61;"handleCurrentChange"&＃64;cell-mouse-enter&＃61;"handleMouseEnter"&＃64;cell-mouse-leave&＃61;"handleMouseLeave"&＃64;expand-change&＃61;"handleExpandChange"&＃64;filter-change&＃61;"handleFilterChange"&＃64;cell-dblclick&＃61;"handleCellDbClick"&＃64;header-click&＃61;"handleHeaderClick"&＃64;row-dblclick&＃61;"handleRowDbClick"&＃64;sort-change&＃61;"handleSortChange"&＃64;cell-click&＃61;"handleCellClick"&＃64;select-all&＃61;"handleSelectAll"&＃64;row-click&＃61;"handleRowClick"&＃64;select&＃61;"handleSelect"


快速上手

npm i wl-gantt --save

或

npm i wl-gantt -S

import wlGantt from &＃39;wl-gantt&＃39;

import "wl-gantt/lib/wl-gantt.css"

Vue.use(wlGantt)

文档

Attributes 参数

props 配置项

Events 事件

Methods 方法

slot

版本记录

1.0.3版本&＃xff0c;修复超过一年的时间跨度展示错误&＃xff1b;增加右键浮窗功能

1.0.2版本&＃xff0c;增加lazy和load参数&＃xff0c;支持懒加载&＃xff0c;并提供懒加载时的方法&＃xff1a;Methods&＃xff1a;1,2,3&＃xff1b;增加ganttOnly参数支持只显示图形

1.0.1版本 增加内置复选框列、序号列&＃xff1b;增加是否可编辑参数&＃xff1b;修改内置前置任务列配置参数值为false&＃xff1b;增加复选框的父子联动属性&＃xff1b;增加名称列可编辑逻辑&＃xff1b;增加添加、移除任务事件&＃xff1b;

1.0.0版本 增加内置前置任务列&＃xff0c;支持多选前置和单选前置&＃xff0c;并自动校验源数据前置任务合法性。

0.1.6版本 更新gantt。1表格支持el-table大部分Attributes和Events&＃xff1b;2名称列增加nameFormatter格式化内容函数支持&＃xff1b;3日期列改为点击显示编辑输入框的形式。注意树表时rowKey参数必须传&＃xff0c;默认为id。

0.1.5版本 更新gantt日期支持yearAndMonth、monthAndDay、yearAndWeek类型&＃xff0c;并自动调整&＃xff0c;规则为&＃xff1a;大于12个月的自动调整为yearAndMonth,3个月到12个月之间的&＃xff0c;自动调整为yearAndWeek, 2个月及以内的自动调整为monthAndDay。新增参数autoGanttDateType可以管理是否自动调整&＃xff0c;如果要关闭自动调整请保证时间跨度尽可能的少&＃xff0c;否则会有明显的性能问题。修复部分时间更改情况不回调的问题。