A high-performance vue gantt component for vue3.
v1
and v2
are not compatible.
More details see document
This repo is pervious jz-gantt
. Only vue3 version. If you have used jz-gantt
before, you should read the following section carefully.
Specification:
This version
1.0.1
is correspond tojz-gantt@1.3.1
. Andjz-gantt
is archived.
@xpyjs/gantt
replaced jz-gantt
.j-
or J
prefixes update to x-
or X
.Beyond that, no other action is required.
For resource code, see Github
For more detailed documentation, see document web
For example, see Example web
If you has any problem, please issue.
npm install @xpyjs/gantt --save
// or
yarn add @xpyjs/gantt
import XGantt from "@xpyjs/gantt";
import "@xpyjs/gantt/index.css";
createApp(App).use(XGantt).mount('#app')
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. V2index
toid
default.
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.
}
]
}
];
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.
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.