jz-gantt
v1.3.1
Published
A high-performance vue gantt component.
Downloads
19
Readme
JzGantt
A high-performance vue gantt component, support vue2 & vue3.
Snipaste
What is JzGantt
- [x] Automatically generate gantt charts based on dates
- [x] Support for multi-layer expanding
- [x] High-performance
- [x] Multi-layer linkage
- [x] Multistage selected
- [x] Custom table column content
- [x] Custom gantt row content
- [x] Custom header content
- [x] Dynamic update data
- [x] Custom any style
- [x] Support dark model
- [x] Multiple date display modes switch
- [ ] More
Document
For resource code, see Github
For more detailed documentation, see document web
For example, see Example web
If you has any problem, please issue.
How to use
install
npm install jz-gantt --save
// or
yarn add jz-gantt // recommend
use
import Gantt from "jz-gantt";
import "jz-gantt/dist/index.css";
createApp(App).use(Gantt).mount('#app')
Basic use
Data should be Array type, index
, startDate
, endDate
and children
are supposed in data item, they help to display the data correctly. Each field can be customized.
const dataList = [
{
index: 1,
startDate: "2020-06-05",
endDate: "2020-08-20",
ttt: {
a: "aaa",
b: "bbb"
},
name: "mydata1",
children: []
},
{
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: []
}
]
}
];
<j-gantt
data-index="index"
:data="dataList"
/>
Use table column
We provide a slot named JGanttColumn
. Label
is required, and it should match data key.
<j-gantt
data-index="index"
:data="dataList"
>
<j-gantt-column label="name" />
</j-gantt>
Use gantt slider
We provide a slot named JGanttSlider
.
Only one slider whill be rendered. If you insert more than one slider, only last slider will be display.
<j-gantt
data-index="index"
:data="dataList"
>
<j-gantt-slider /> <!-- no render -->
<j-gantt-slider /> <!-- will be rendered -->
</j-gantt>