A high-performance vue gantt component.
npm install @xpyjs/ganttv1 and v2 are not compatible.
jz-gantt. Only vue3 version. If you have used jz-gantt before, you should read the following section carefully.
1.0.1 is correspond to jz-gantt@1.3.1. And jz-gantt is archived.
@xpyjs/gantt replaced jz-gantt.
j- or J prefixes update to x- or X.
bash
npm install @xpyjs/gantt --save
// or
yarn add @xpyjs/gantt
`
$3
`js
import XGantt from "@xpyjs/gantt";
import "@xpyjs/gantt/index.css";
createApp(App).use(XGantt).mount('#app')
`
$3
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.
> children in V2 is no longer required.
> V2 index to id default.
`js
const dataList = [
{
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.
}
]
}
];
`
version 1
`html
`
version 2
`html
`
$3
We provide a slot named XGanttColumn. 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.
version 1
`html
`
version 2
`html
`
$3
We provide a slot named XGanttSlider.
Only one slider whill be rendered. If you insert more than one slider, only last slider will be display.
version 1
`html
`
version 2
`html
``