效果如图:
后台拿到数据 处理之后如图:
含义:
如上图所示, 如果一行需要展示多个 需要给父数据的那条添加render:split属性,
子数据的parent为父数据的Id即可
切记 父数据的id 别为0 为0 时 会出现错乱
因为有些小伙伴提出分段展示的数据结构还是有点问题,下面展示一个完整的demo
<template>
<div id="gantt" ref="gantt"></div>
</template>
<script>
import { gantt } from 'dhtmlx-gantt';
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
export default {
name: 'SpeadDomeGantt',
data() {
return {
};
},
mounted() {
this.init()
},
methods: {
init(){
gantt.config.xml_date = "%Y-%m-%d %H:%i";
gantt.config.scale_height = 50 //设置甘特图的表头高度
//鼠标移入展示信息
gantt.plugins({
tooltip: true
})
//时间展示 2021-10-11 07:22
gantt.templates.tooltip_date_format = gantt.date.date_to_str("%Y-%m-%d %H:%i")
//鼠标移入展示信息
gantt.config.readonly = true //甘蔗图只读属性
gantt.config.round_dnd_dates = false //将任务开始时间和结束时间自动"四舍五入'
gantt.config.root_id = "root"
//添加taba栏
gantt.config.columns = [
{name:"name", label:"名称", align: 'center', width: 120},
{name:"age", label:"年龄", align: 'center', width: 120}
]
//禁用拖拽项 拖拽类型
gantt.attachEvent("onBeforeTaskDrag", function(id, mode, e){
var modes = gantt.config.drag_mode;
switch (mode){
case modes.move:
break;
case modes.resize:
break;
case modes.progress:
break;
}
})
gantt.init(this.$refs.gantt)
//模拟数据
let datalist = [
//第一组 //整条数据需要带上render属性 里面多段的数据parent执行整条的id
{
id: 1, name: '小花', age: 18, render: 'split', text: ''
},
{
id: 100, parent: 1, start_date: '2022-08-19 07:20:00', end_date: '2022-08-20 20:00:00',
text: '玩游戏', color: '#F56C6C'
},
{
id: 101, parent: 1, start_date: '2022-08-20 23:20:00', end_date: '2022-08-21 20:00:00',
text: '事情一', color: '#67C23A'
},
{
id: 102, parent: 1, start_date: '2022-08-22 07:20:00', end_date: '2022-08-22 20:00:00',
text: '事情二', color: '#E6A23C'
},
{
id: 103, parent: 1, start_date: '2022-08-23 07:20:00', end_date: '2022-08-24 20:00:00',
text: '事情三', color: '#909399'
},
//第二组
{
id: 2, name: '小草', age: 16, render: 'split', text: ''
},
{
id: 104, parent: 2, start_date: '2022-08-19 02:20:00', end_date: '2022-08-20 18:00:00',
text: '玩游戏', color: '#E6A23C'
},
{
id: 105, parent: 2, start_date: '2022-08-20 22:10:00', end_date: '2022-08-21 10:00:00',
text: '事情四', color: '#909399'
},
{
id: 106, parent: 2, start_date: '2022-08-21 17:20:00', end_date: '2022-08-22 20:00:00',
text: '事情五', color: '#67C23A'
},
{
id: 107, parent: 2, start_date: '2022-08-23 00:20:00', end_date: '2022-08-23 20:00:00',
text: '事情六', color: '#F56C6C'
},
]
gantt.parse({data: datalist})
},
},
};
</script>
<style scoped>
#gantt {
height: 120px;
}
</style>
效果图如下:
ok, 有任何问题请联系我, 尽量给出详细的解答!