继上篇进行修改

dhtmlxGantt 甘特图 一行展示多条任务类型_dhtmlxgantt多个任务显示在一行-CSDN博客

主要修改 getProductData 数据部分：

数据中添加：

render: "split", //允许任务在同一行中拆分显示，

parent: "1", // 将任务XX作为任务1的子任务

getProductData() {const response = {code: 200,data: {result: [{id: "1",productPlanCode: "党办会议室",planStartDate: "", //计划开始时间planEndDate: "", //计划结束时间documentStatus: 1,productName: "假名称00111",render: "split", // 允许任务在同一行中拆分显示parent: "", // 将任务3作为任务1的子任务},{id: "2",productPlanCode: "党办会议室",planStartDate: "2025-03-07 11:00:00", //计划开始时间planEndDate: "2025-03-07 12:30:00", //计划结束时间documentStatus: 3,productCode: "fakeBM003",productName: "假名称003",qty: "4",finishQty: "15",parent: "1", // 将任务3作为任务1的子任务render: "split",},{id: "3",productPlanCode: "fakeCode2",planStartDate: "2025-03-07 14:00:00",planEndDate: "2025-03-07 14:30:00",documentStatus: 2,productCode: "fakeBM002",productName: "假名称002",qty: "4",finishQty: "20",parent: "1",render: "split",},{id: "4",productPlanCode: "fakeCode2",productName: "假名称002222",parent: "",render: "split",},{id: "5",productPlanCode: "fakeCode2",planStartDate: "2025-03-07 13:00:00",planEndDate: "2025-03-07 14:30:00",documentStatus: 2,productCode: "fakeBM002",productName: "假名称002",qty: "4",finishQty: "20",parent: "4",render: "split",},],},};if (response.code == 200) {const data = response.data;// console.log("数据源:", response.data);// 格式化数据以匹配甘特图的要求let parentData = [];data.result.map((item) => {if (item.parent) {//说明是子任务let tempChildData = {id: item.id,parent: item.parent,start_date: item.planStartDate,end_date: item.planEndDate,text: item.productName,// productCode: item.productCode, //产品编码};parentData.push(tempChildData);} else {let tempData = {id: item.id,name: item.productPlanCode,render: item.render,text: "",};parentData.push(tempData);}});gantt.parse({ data: parentData });} else {this.$message.error("列表查询失败，请联系管理员！");}},