一個基於vue和element-ui的甘特圖組件,gantt、項目管理、任務管理器。

wl-gantt

簡介

目前市面上最有名的幾個gantt插件佔據江湖了很是久遠的時間,它們古老又強大。 但無一例外的是:它們收費或極其難用而且依賴很是古老的技術,其中有些技術如今入行的新手甚至從未聽聞。
【jQueryGantt】【plusgantt】【dhtmlx】
不能否認它們都很是的強大,無論是從性能仍是功能性。可是大多的業務需求並不須要如此龐然大物才能知足需求。
另外一方面古老的技術稀缺的文檔又讓開發者無從下手(收費版甚至不提供文檔,而你的老闆又確定不會提供錢買下受權)。 【wl-gantt】出現的背景就是筆者在公司的Vue項目中使用B***Gantt插件所受到的巨大傷害:基於extjs(對於17年入行的我來講沒聽過)、不提供開發文檔、沒有中文資料、源碼加密,開發全靠打印實例找屬性。 wl-gantt是一個基於Vue及elementUi的gantt甘特圖插件,是一個896的碼奴在僅有的剩餘的1中擠時間開發而成。
它目前僅提供了不多的功能:自動檢查源數據是否符合project任務安排規則,結束後開始的前置任務規則。yearAndmonth的gantt時間跨度。
但它絕對簡單易用,而且高度可配置。
它的實際年齡才只有3天,它正在我和全部熱愛開源事業的朋友們手中逐漸長大。
下個階段,它將學會:css

  1. yearAndMonth、monthAndDay、yearAndWeek時間跨度配置
  2. 內置前置任務選擇器
  3. 任務鏈接線
  4. 任務自定義懸浮提示
  5. 和全部你以爲須要用到的需求

在線演示

GitHub

demo

快速上手

npm i wl-gantt --savehtml

git

npm i wl-gantt -Sgithub

import wlGantt from 'wl-gantt'npm

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

Vue.use(wlGantt)性能

文檔

Attributes

序號 參數 說明 類型 可選值 默認值 注意
1 data 數據 Array - [] -
2 dateType gantt圖區日期表頭類型 String monthAndDay、yearAndMonth、yearAndDay yearAndMonth -
3 treeProps 樹表配置項 Object - - 見下方props
4 startDate 項目開始時間 String、Object 必填 - 注意:不要求任務時間線在項目開始時間內,而且當任務時間超出項目時間時,將更新項目時間
5 endDate 項目結束時間 String、Object 必填 - 注意:不要求任務時間線在項目開始時間內,而且當任務時間超出項目時間時,將更新項目時間
6 checkSource 是否檢查源數據符合規則 Boolean - - 檢查源數據爲自動修改不符合規範的時間爲符合規則的指望值
7 treatIdAsIdentityId 是否使用id來做爲自增id Boolean - false 若是是請保證id原本就簡短的數字型而不是較長的字符串或guid
8 solt 表格列支持solt自定義內容 - - - 在默認的名字、開始時間、結束時間列以後

props

序號 參數 說明 默認值
1 children 數據的子集children字段 children
2 name 用於顯示名字的字段 name
3 id 每條數據的id,必須惟一 id
4 pid 每條數據的父節點id字段 pid
5 startDate 每條數據的開始時間字段 startDate
6 endDate 每條數據的結束時間字段 endDate
7 identityId 數據自增id identityId
8 parents 自增父級id樹,逗號分隔 parents
9 pre 前置任務字段,字段值應是前置任務的id pre

Events

序號 事件名 說明 回調參數
1 timeChange 當任務時間發生更改時觸發 function(row) 依次爲當前行數據
相關文章
相關標籤/搜索