yarn add vue-tasks-gantt-chart
# or
npm install vue-tasks-gantt-chart --save
目前只支持传入日期的格式年份/月份/日期
- 在项目的入口文件
main.js
中加入下述代码
import vueTasksGanttChart from "vue-tasks-gantt-chart";
Vue.use(vueTasksGanttChart);
- 在你的业务代码中,进行试验,然后传对应的参数即可.如果数据加载时间比较长,在自己代码中配合loading 效果去渲染更合适
<template>
<div>
<vueTasksGanttChart :gantObject="ganttObject" />
</div>
</template>
<script>
export default {
data() {
return {
ganttObject: {
startDate: "2022/1/1", //定义的头部时间范围
endDate: "2022/3/16", //定义的头部时间范围
taskArrayData: [
{
taskMessage: {
title: "项目制作任务1"
},
taskStartTime: "2022/1/2",
taskEndTime: "2022/1/15",
taskBackground: "",
process: "2022/1/12",
precentNumer: "80%",
precentBackground: "",
children: [
{
parent: 1,
taskMessage: {
title: "项目制作1子任务"
},
taskBackground: "",
process: "2022/1/6",
precentNumer: "60%",
precentBackground: "",
taskStartTime: "2022/1/4",
taskEndTime: "2022/1/10"
},
{
taskMessage: {
title: "项目制作1子任务"
},
taskBackground: "",
process: "2022/1/8",
precentNumer: "",
precentBackground: "",
taskStartTime: "2022/1/6",
taskEndTime: "2022/1/10"
},
{
parent: 1,
taskMessage: {
title: "项目制作1子任务"
},
taskBackground: "",
process: "",
precentNumer: "",
precentBackground: "",
taskStartTime: "2022/1/6",
taskEndTime: "2022/1/10"
}
]
},
{
taskMessage: {
title: "项目制作任务2"
},
taskStartTime: "2022/1/5",
taskEndTime: "2022/1/15",
taskBackground: "#409eff",
children: [
{
taskMessage: {
title: "项目制作2子任务"
},
taskBackground: "",
process: "",
precentNumer: "",
precentBackground: "",
taskStartTime: "2022/1/12",
taskEndTime: "2022/1/13"
}
]
},
{
taskMessage: {
title: "项目制作任务3"
},
taskStartTime: "2022/1/2",
taskEndTime: "2022/3/16",
taskBackground: "",
children: [
{
parent: 1,
taskMessage: {
title: "项目制作3子任务"
},
taskBackground: "",
process: "",
precentNumer: "",
precentBackground: "",
taskStartTime: "2022/1/12",
taskEndTime: "2022/3/13"
}
]
}
]
}
};
}
};
</script>
如示例代码所示, 在 template 中使用后,配置一个对象 ganttObject
- startDate 定义的头部时间范围
- endDate 定义的头部时间范围
- taskArrayData: [ 任务数组 { taskMessage: { title: "" 主任务名称 },
- taskStartTime: "", 主任务开始的时间
- taskEndTime: "", 主任务结束的时间
- taskBackground: "", 主任务的背景色
- process: "",主任务支持进度条
- precentNumer: "80%", 主任务进度条可定义完成的数值
- precentBackground: "", 主任务进度条可定义背景色
- children: [] 支持显示子任务,内部参数同外部
至此,插件的所有使用方法就介绍完了。