Repository files navigation

[English] [中文]

A high-performance vue gantt component for vue3.

• vue2 version isHERE

v1 andv2 are not compatible.

• props not same
• slots not same
• components not same

More details seedocument

This repo is perviousjz-gantt. Only vue3 version. If you have usedjz-gantt before, you should read the following section carefully.

Specification:

This version1.0.1 is correspond tojz-gantt@1.3.1. Andjz-gantt is archived.

1. package name changesd@xpyjs/gantt replacedjz-gantt.
2. Allj- orJ prefixes update tox- orX.

Beyond that, no other action is required.

• Automatically generate gantt charts based on dates
• Support for multi-layer expanding
• High-performance
• Multi-layer linkage
• Multistage selected
• Custom table column content
• Custom gantt row content
• Custom header content
• Dynamic update data
• Custom any style
• Support dark model
• Multiple date display modes switch
• More

For resource code, seeGithub

For more detailed documentation, seedocument web

For example, seeExample web

If you has any problem, pleaseissue.

npm install @xpyjs/gantt --save// oryarn add @xpyjs/gantt

importXGanttfrom"@xpyjs/gantt";import"@xpyjs/gantt/index.css";createApp(App).use(XGantt).mount('#app')

Data should be Array type,index,startDate,endDate andchildren are supposed in data item, they help to display the data correctly. Each field can be customized.

children in V2 is no longer required.V2index toid default.

constdataList=[{index:1,startDate:"2020-06-05",endDate:"2020-08-20",ttt:{a:"aaa",b:"bbb"},name:"mydata1",children:[]// children is required. If no child, empty array is ok.},{index:2,startDate:"2020-07-07",endDate:"2020-09-11",ttt:{},name:"mydata2",children:[{index:3,startDate:"2020-07-10",endDate:"2020-08-15",ttt:{a:"aaa"},name:"child1",children:[]// children is required. If no child, empty array is ok.}]}];

<x-ganttdata-index="index":data="dataList"/>

<x-ganttdata-id="index":data="dataList"/>

We provide a slot namedXGanttColumn.Label is required, and it should match data key.

label is required, and it should match data key. label's value should correspond to the name of the field in 'data' (deep query support), which tells the component to render the column.

<x-ganttdata-index="index":data="dataList"><x-gantt-columnlabel="name"/></x-gantt>

<x-ganttdata-id="index":data="dataList"><x-gantt-columnprop="name"/></x-gantt>

We provide a slot namedXGanttSlider.

Only one slider whill be rendered. If you insert more than one slider, only last slider will be display.

<x-ganttdata-index="index":data="dataList"><x-gantt-slider/><!-- no render --><x-gantt-slider/><!-- will be rendered --></x-gantt>

<x-ganttdata-id="index":data="dataList"><x-gantt-slider/><!-- no render --><x-gantt-slider/><!-- will be rendered --></x-gantt>