vue甘特图vxe-gantt自定义任务视图单元格的背景颜色

通过 taskViewConfig.viewStyle.cellStyle 可以直接为甘特图日期轴上的每一个单元格设置内联样式，实现灵活的背景色、边框、字体等视觉效果。
配置说明

样式配置位于 taskViewConfig.viewStyle.cellStyle，它是一个函数，接收当前单元格对应的日期对象，返回一个样式对象

1. taskViewConfig: {
2.   viewStyle: {
3.     cellStyle({ dateObj }) {
4.       // 根据日期逻辑返回样式对象
5.       return {
6. <template>
7.   
8.     <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
9.   
10. </template>backgroundColor: '#f8e4e4',
11. <template>
12.   
13.     <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
14.   
15. </template>color: '#333'
16.       }
17.     }
18.   }
19. }

复制代码

参数 cellStyle 函数接收一个参数对象，其中 dateObj 包含当前单元格的日期信息：
dateObj.d        number        日期（几号）
dateObj.e        number        星期几
dateObj.m        number        月份
dateObj.y        number        年份
完整示例

1. <template>
2.   
3.     <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
4.   
5. </template>

复制代码

cellStyle vs cellClassName 对比

cellStyle        直接返回内联样式对象，无需额外 CSS        简单样式、动态变化较少、快速原型
cellClassName        返回类名，需在 CSS 中定义样式        复杂样式、需要复用、或需配合伪类/动画
两种方式可同时使用，内联样式优先级高于类样式。
通过 taskViewConfig.viewStyle.cellStyle 可以快速为甘特图日期单元格添加内联样式，满足项目中对特殊日期的高亮、区分需求。相比 cellClassName，它更轻量、无需管理额外 CSS 文件，适合样式逻辑简单、动态性强的场景
https://gantt.vxeui.com

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！