dhtmlxGantt 甘特图 一行展示多条任务类型

效果如图:

 后台拿到数据 处理之后如图:

 含义:

如上图所示, 如果一行需要展示多个 需要给父数据的那条添加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, 有任何问题请联系我, 尽量给出详细的解答!