在项目管理中月视图是一个承上启下的时间维度——它既能提供比年视图更细的颗粒度又比周/天视图更宏观适合展示季度性任务、中短期项目里程碑。vxe-gantt 提供了灵活的月视图渲染能力支持 默认模式 和 精确模式 两种粒度满足从宏观规划到精细化跟踪的各种需求。本文介绍月视图的两种使用方式并通过示例对比它们的差异与应用场景。月视图的配置参数vxe-gantt 通过 taskViewConfig.scales 配置项控制时间轴的层级结构。月视图通常配置为 [‘year’, ‘month’]即时间轴分为“年”和“月”两级刻度每一列代表一个月份配置项值说明taskViewConfig.scales[‘year’, ‘month’]以年-月为层级渲染时间轴每个单元格对应一个月。taskViewConfig.viewStyle.cellWidth数值如 120每个月份单元格的宽度单位px。taskConfig.dateFormat日期格式字符串控制日期解析精度决定甘特条在单元格内的精确位置。适用场景季度规划、中期项目数月至一年、产品路线图、里程碑跟踪等。以月为粒度渲染在默认模式下甘特图将日期解析到月yyyy-MM每个单元格对应一个完整的月份。甘特条以月为单位在时间轴上定位不区分具体的天。templatedivvxe-ganttv-bindganttOptions/vxe-gantt/div/templatescriptsetupimport{reactive}fromvueconstganttOptionsreactive({border:true,showOverflow:true,cellConfig:{height:80},taskBarConfig:{showProgress:true,showContent:true,barStyle:{round:true,bgColor:#f56565,completedBgColor:#65c16f}},taskViewConfig:{scales:[year,month],tableStyle:{width:320},viewStyle:{cellWidth:120}},columns:[{type:seq,field:seq,width:70},{field:title,title:任务名称},{field:start,title:开始时间,width:100},{field:end,title:结束时间,width:100}],data:[{id:10001,title:A项目,start:2024-02-26,end:2024-03-03,progress:90},{id:10002,title:城市道路修理进度,start:2024-03-03,end:2024-04-18,progress:70},{id:10003,title:B大工程,start:2024-03-28,end:2024-05-11,progress:90},{id:10004,title:超级大工程,start:2024-04-11,end:2024-05-18,progress:80}]})/script特点说明简洁清晰任务按月份定位适合快速把握整体进度。数据兼容性强即使日期包含具体天也会自动映射到对应的月份。精度有限无法区分同一月份内的不同天。适用场景季度计划、月度里程碑概览、产品路线图。精确模式通过设置 taskConfig.dateFormat可以指定日期解析的精度如 yyyy-MM-dd让甘特条在单元格内精确反映任务在月内的起止位置。例如一个从某月10号开始、20号结束的任务在月视图的单元格内会显示出明显的偏移而不仅仅占满整月。注意精确模式下任务的 start 和 end 字段必须与 dateFormat 格式完全一致。templatedivvxe-ganttv-bindganttOptions/vxe-gantt/div/templatescriptsetupimport{reactive}fromvueconstganttOptionsreactive({border:true,showOverflow:true,cellConfig:{height:80},taskConfig:{dateFormat:yyyy-MM-dd},taskBarConfig:{showProgress:true,showContent:true,barStyle:{round:true,bgColor:#f56565,completedBgColor:#65c16f}},taskViewConfig:{scales:[year,month],tableStyle:{width:320},viewStyle:{cellWidth:120}},columns:[{type:seq,field:seq,width:70},{field:title,title:任务名称},{field:start,title:开始时间,width:160},{field:end,title:结束时间,width:160}],data:[{id:10001,title:A项目,start:2024-02-26,end:2024-03-03,progress:90},{id:10002,title:城市道路修理进度,start:2024-03-03,end:2024-04-18,progress:70},{id:10003,title:B大工程,start:2024-03-28,end:2024-05-11,progress:90},{id:10004,title:超级大工程,start:2024-04-11,end:2024-05-18,progress:80}]})/script点说明精度更高甘特条在月单元格内按天偏移直观展示任务在月份中的具体分布。视觉细腻同一月内的多个任务可以清晰区分先后顺序。数据格式要求日期字符串必须完全符合 dateFormat。适用场景需要精确到天的月计划、任务排期跟踪。对比对比维度默认模式精确模式日期解析仅解析到月yyyy-MM按 dateFormat 解析如 yyyy-MM-dd甘特条定位占据整个月份单元格根据实际天在单元格内偏移数据字段要求start/end 至少包含年月必须包含完整的年月日信息视觉表现任务条填满整个单元格宽度任务条按天比例缩放在单元格内典型场景季度规划、里程碑概览精细排期、月度任务跟踪配置说明配置路径默认模式精确模式taskViewConfig.scales[‘year’, ‘month’][‘year’, ‘month’]taskViewConfig.viewStyle.cellWidth120120taskConfig.dateFormat不设置默认 yyyy-MM‘yyyy-MM-dd’columns 中日期列的宽度100160显示完整日期两种方式可以灵活切换只需调整 dateFormat 配置和日期列的宽度即可。开发者可根据项目实际需求在“简洁性”与“精确性”之间做出最优选择。https://gantt.vxeui.com