vue 甘特图组件 vxe-gantt 自定义右侧任务视图列头样式

在甘特图的实际应用中通过自定义列头样式可以显著提升数据的可读性。例如高亮周末或特定日期能帮助团队更直观地识别工作日和非工作日。vxe-gantt 提供了 taskViewConfig.scales 中的 headerCellStyle 回调函数让你可以灵活地为时间轴上的每个刻度单元格定制样式。核心配置headerCellStyle通过在 scales 配置中为特定层级如 day、date添加 headerCellStyle 函数你可以根据日期信息返回自定义的样式对象。taskViewConfig:{scales:[{type:month},{type:day,headerCellStyle({dateObj}){// 根据 dateObj 返回样式对象if(dateObj.e0||dateObj.e6){// 周日或周六return{color:#65c16f}// 文字颜色变绿}return{}// 默认样式}}]}代码templatedivvxe-ganttv-bindganttOptions/vxe-gantt/div/templatescriptsetupimport{reactive}fromvueconstganttOptionsreactive({border:true,taskViewConfig:{showNowLine:true,scales:[{type:month},{type:day,headerCellStyle({dateObj}){// 周六周日高亮if(dateObj.e0||dateObj.e6){return{color:#65c16f}}return{}}},{type:date,headerCellStyle({dateObj}){// 周六周日高亮if(dateObj.e0||dateObj.e6){return{backgroundColor:#f6ca9d}}return{}}}]},taskBarConfig:{showProgress:true,showContent:true,barStyle:{round:true,bgColor:#f56565,completedBgColor:#65c16f}},columns:[{field:title,title:任务名称},{field:start,title:开始时间,width:100},{field:end,title:结束时间,width:100}],data:[{id:10002,title:任务C30456572349,start:2024-03-03,end:2024-03-08,progress:10},{id:10004,title:任务P687,start:2024-03-05,end:2024-03-11,progress:15},{id:10006,title:任务B567,start:2024-03-10,end:2024-03-21,progress:5},{id:10007,title:任务V513802134450,start:2024-04-15,end:2024-04-24,progress:70},{id:10008,title:任务G110,start:2024-04-20,end:2024-04-29,progress:50}]})/script参数详解headerCellStyle 回调接收一个包含 dateObj 的对象dateObj 提供了关于当前刻度日期的详细信息属性说明示例值dateObj.y年份2024dateObj.M月份0-112 (代表3月)dateObj.d日期1-3115dateObj.e星期几0-60周日1周一 … 6周六0 或 6例如动态获取节假日数据如果需要标记法定节假日可以结合外部数据源// 假设从 API 获取的节假日列表constholidays[2024-05-01,2024-10-01]{type:date,headerCellStyle({dateObj}){constdateStr${dateObj.y}-${String(dateObj.m1).padStart(2,0)}-${String(dateObj.d).padStart(2,0)}if(holidays.includes(dateStr)){return{backgroundColor:#ffcccc,color:#d32f2f}}return{}}}通过 taskViewConfig.scales 中 headerCellStyle 回调你可以为 vxe-gantt 的时间轴列头赋予无限的自定义能力。无论是简单的周末高亮还是复杂的动态样式都能通过几行代码轻松实现让甘特图更贴合业务场景和视觉需求。https://gantt.vxeui.com