Geek-ganttnew NPM

gantt

简介

甘特图（Gantt chart）又称为横道图、条状图(Bar chart)、生产计划进度图。其通过条状图来显示项目，进度，和其他时间相关的系统进展的内在关Markdown Oper Preview to the Side系随着时间进展的情况。

展示页面

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

    :fit="fit"
    :size="size"
    :border="border"
    :data="selfData"
    :stripe="stripe"
    :height="height"
    :row-key="rowKey"
    :row-style="rowStyle"
    :class="dateTypeClass"
    :cell-style="cellStyle"
    :max-height="maxHeight"
    :tree-props="selfProps"
    :current-row-key="rowKey"
    :row-class-name="rowClassName"
    :cell-class-name="cellClassName"
    :expand-row-keys="expandRowKeys"
    :header-row-style="headerRowStyle"
    :header-cell-style="headerCellStyle"
    :default-expand-all="defaultExpandAll"
    :header-row-class-name="headerRowClassName"
    :highlight-current-row="highlightCurrentRow"
    :header-cell-class-name="headerCellClassName"
    :currentPage="pages.currentPage"
    :pageSizes="pages.pageSizes"
    :pageSize="pages.pageSize"
    :total="pages.total"
    
    :colorArr='colorArr'
    :colorLower='colorLower'
    :bgOne='bg_one'
    :bgTwo="bg_two"
    :bgThree="bg_three"
    :bgFour="bg_four"
    :bgLower="bg_lower"

    @header-contextmenu="handleHeaderContextMenu"
    @selection-change="handleSelectionChange"
    @row-contextmenu="handleRowContextMenu"
    @current-change="handleCurrentChange"
    @cell-mouse-enter="handleMouseEnter"
    @cell-mouse-leave="handleMouseLeave"
    @expand-change="handleExpandChange"
    @filter-change="handleFilterChange"
    @cell-dblclick="handleCellDbClick"
    @header-click="handleHeaderClick"
    @row-dblclick="handleRowDbClick"
    @sort-change="handleSortChange"
    @cell-click="handleCellClick"
    @select-all="handleSelectAll"
    @row-click="handleRowClick"
    @select="handleSelect"
    @rowClick="rowClick"
    @current-change-page="currentChange"

快速上手

npm i llz-gantt --save

或

npm i llz-gantt -S

import llzGantt from "llz-gantt/src/pages/wl-gantt" components:{llzGantt},

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	autoGanttDateType	自动调整gantt时间跨度类型，具体规则见`版本记录1`	Boolean	-	true	-
9	nameFormatter	名称列格式化内容函数	Function	-	-	Function(row, column, cellValue, index)
10	其他Table Attributes	文档地址	-	-	-	-
11	usePreColumn	是否使用内置前置任务列	Boolean	-	false	-
12	preMultiple	前置任务是否可以多选	Boolean	-	true	如果开启多选则pre字段必须是Array，否则可以是Number\String
13	preFormatter	前置内容列格式化函数	Function	-	-	如不传则根据`prop name字段+，`拼接
14	emptyCellText	空值单元格占位符	String	-	'-'	-
15	useCheckColumn	是否使用内置复选框列	Boolean	-	false	-
16	useIndexColumn	是否使用内置序号列	Boolean	-	false	-
17	edit	是否可编辑	Boolean	-	true	-
18	parentChild	使用复选框时，是否父子关联	Boolean	-	true	必须配置props的id、children字段
19	ganttOnly	是否只显示图形	Boolean	-	false	-
20	lazy	同el-table	Boolean	-	false	-
21	load	同el-table	Function	-	-	-
22	contextMenuOptions	右键浮窗配置项，如果存在则点击gantt右键显示配置的浮窗信息	Array	-	-	数组内对象属性有： @param {String} label 展示名称 @param {String} prop 绑定的字段 * @param {String} icon 可选字体图标class
23	useRealTime	是否使用实际开始时间、实际结束时间，开启则在计划时间蓝色条外展示实际时间棕红色条	Boolean	-	false	-
24	color	项目开始时间颜色	String	-	blue	-
25	realColor	时间开发时间颜色	String	-	pick	-
26	otherColor	其他时间颜色	String	-	black	-
27	alreadyColor	真实开发时间颜色	String	-	green	-
28	currentPage	状态布局	String	-	center	-
29	pageSizes	每页显示个数选择器的选项设置	Array	-	10, 20, 30, 50, 100	-
30	pageSize	每页显示条目个数	Number	-	10	-
31	total	总条目数	Number	-	0	-

新版支持双行无限极+无限极颜色自定义

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
10	hasChildren	指定哪些行是包含子节点	hasChildren
11	realStartDate	实际开始时间字段	realEndDate
12	realEndDate	实际结束时间字段	realEndDate

Events 事件

序号	事件名	说明	回调参数
1	timeChange	当任务时间发生更改时触发	function(row) 依次为当前行数据
2	其他Table Events	文档地址	-	-
3	preChange	前置任务修改事件	function(row) 依次为当前行数据
4	nameChange	名称修改事件	function(row) 依次为当前行数据
5	taskAdd	添加任务事件	function(row) 依次为当前行数据
6	taskRemove	删除任务事件	function(row) 依次为当前行数据
7	rowClick	右键点击事件	function(row) 依次为当前行数据
8	current-change-page	currentPage 改变时会触发	function(row) 当前页
9	size-change	currentPage 改变时会触发	function(row) 每页条数

Methods 方法

序号	方法名	说明	回调参数
1	loadTree	手动调用树表懒加载	function(row) 依次为要展开的行信息
2	loadTreeAdd	更新树表懒加载后的子节点	function(id, list) 依次为要更新的节点id，要添加的子节点list，注意此为合并list和原来的子节点数据
3	loadTreeRemove	移除懒加载数据的子节点	function(id, list) 依次为要更新的节点id，要删掉的子字节的rowKey

这里是重点！！！！！！# llz-gantt

简介