在项目排期管理中周视图是一个兼顾颗粒度与可读性的理想选择——它既能清晰展示任务在一周内的分布又不会像天视图那样因时间轴过密而难以阅读。vxe-gantt 提供了灵活的周视图渲染能力支持 默认模式 和 精确模式 两种粒度满足从周计划到精细化排期的各种需求。说明vxe-gantt 通过 taskViewConfig.scales 配置项控制时间轴的层级结构。周视图通常配置为 [‘month’, ‘week’]即时间轴分为“月”和“周”两级刻度。每一列代表一个日历周通常以周一作为一周的起始日。配置项值说明taskViewConfig.scales[‘month’, ‘week’]以月-周为层级渲染时间轴每个单元格对应一周。taskViewConfig.viewStyle.cellWidth数值如 120每个周单元格的宽度单位px。taskConfig.dateFormat日期格式字符串控制日期解析精度决定甘特条在单元格内的精确位置。默认模式以周为粒度渲染在默认模式下甘特图将日期解析到周yyyy-W即年份-周数每个单元格对应一个完整的日历周。甘特条以周为单位在时间轴上定位不区分具体的天。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:[month,week],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:80},{id:10002,title:城市道路修理进度,start:2024-03-03,end:2024-03-08,progress:90},{id:10003,title:B大工程,start:2024-03-06,end:2024-03-11,progress:90},{id:10004,title:超级大工程,start:2024-03-11,end:2024-03-18,progress:100}]})/script特点说明✅ 清晰简洁任务按周定位一眼看出任务分布在哪几周。✅ 数据兼容性强即使日期包含具体天也会自动映射到对应的周。⚠️ 精度有限无法区分同一周内的不同天。 适用场景周计划、迭代概览、中期项目跟踪。精确模式精确到天通过设置 taskConfig.dateFormat可以指定日期解析的精度如 yyyy-MM-dd让甘特条在单元格内精确反映任务在周内的起止位置。例如一个从周三开始、周五结束的任务在周视图的单元格内会显示出明显的偏移而不仅仅占满整周。注意精确模式下任务的 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:[month,week],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:80},{id:10002,title:城市道路修理进度,start:2024-03-03,end:2024-03-08,progress:90},{id:10003,title:B大工程,start:2024-03-06,end:2024-03-11,progress:90},{id:10004,title:超级大工程,start:2024-03-11,end:2024-03-18,progress:100}]})/script特点说明✅ 精度更高甘特条在周单元格内按天偏移直观展示任务在一周中的具体分布。✅ 视觉细腻同一周内的多个任务可以清晰区分先后顺序。⚠️ 数据格式要求日期字符串必须完全符合 dateFormat。 适用场景精细化排期、需要区分周内不同天数的场景。两种模式对比对比维度默认模式精确模式日期解析仅解析到周yyyy-W按 dateFormat 解析如 yyyy-MM-dd甘特条定位占据整个周单元格根据实际天在单元格内偏移数据字段要求start/end 至少包含日期必须包含完整的年月日信息视觉表现任务条填满整个单元格宽度任务条按天比例缩放在单元格内典型场景周计划、迭代概览精细排期、工时跟踪进阶自定义每周起始日期默认情况下每周的起始日取决于组件语言环境通常周一为起始。如需明确控制可以将 scales 中的 ‘week’ 改为对象形式通过 startDay 参数指定taskViewConfig:{scales:[{type:month},{type:week,startDay:0}// 0 周日1 周一以此类推]}国内项目通常将周一作为一周的起始默认值为 startDay: 1vxe-gantt 的周视图提供了两种使用模式默认模式以周为粒度简洁清晰适合周计划、迭代概览等宏观场景。精确模式通过 taskConfig.dateFormat 指定日期精度在周单元格内精确定位任务的天级分布适合需要细粒度时间管理的场景。两种模式可以灵活切换只需调整 dateFormat 配置和日期列的宽度即可。开发者可根据项目实际需求在“简洁性”与“精确性”之间做出最优选择。https://gantt.vxeui.com