想要的效果是这种,找了很多有关甘特图的插件,终于找到了一个可以看懂的插件,下面是代码,看着更简化和使用
<div style="width:100%;height:100%;margin-top:50px">
<div>
<gantt-elastic :tasks="tasks" :options="options">
<!-- <gantt-elastic-header slot="header">
</gantt-elastic-header> -->
</gantt-elastic>
</div>
</div>
import GanttElastic from "gantt-elastic";
import Header from "gantt-elastic-header";
components: {
'gantt-elastic-header': Header,
'gantt-elastic': GanttElastic
},
data(){
return:{
tasks: [{
id: 1,
label: 'Make some noise',
start: '2023-09-27 15:20:29',
end: '2023-09-27 16:20:29',
type: 'project',
},
{
id: 2,
label: 'With',
parentId: 1,//所属下级,它的上级是id为1的数据
start: '2023-10-07 15:59:39',//开始时间
end: '2023-10-09 15:59:39',//结束时间
type: 'project'//项目的类型
},
],
options: {
times: {
// timeScale: 12,
timeZoom: 1//时间变为每天24小时格式
},
maxRows: 100,
maxHeight: 500,
row: {
height: 24
},
calendar: {
hour: {
display: true
}
},
chart: {
progress: {
bar: false
},
expander: {
display: true//可以有展开和折叠的效果加号
}
},
taskList: {
expander: {
straight: false
},
columns: [
{
id: 1,
label: "ID",
value: "id",
width: 40
},
{
id: 2,
label: "Description",
value: "label",
width: 200,
expander: true,//可以有展开和折叠的效果加号
},
]
},
},
}
}
前提需要先下载gantt-elastic,gantt-elastic-header这个可用可不用,最后展示的效果是这样的,
官网demo图网址:https://neuronet.io/gantt-elastic/#/