vue甘特图vxe-gantt自定义任务视图单元格的背景颜色
通过 taskViewConfig.viewStyle.cellStyle 可以直接为甘特图日期轴上的每一个单元格设置内联样式，实现灵活的背景色、边框、字体等视觉效果。配置说明
样式配置位于 taskViewConfig.viewStyle.cellStyle，它是一个函数，接收当前单元格对应的日期对象，返回一个样式对象
taskViewConfig: {
viewStyle: {
cellStyle({ dateObj }) {
// 根据日期逻辑返回样式对象
return {
<template>
<vxe-gantt v-bind="ganttOptions"></vxe-gantt>
</template>backgroundColor: '#f8e4e4',
<template>
<vxe-gantt v-bind="ganttOptions"></vxe-gantt>
</template>color: '#333'
}
}
}
}参数 cellStyle 函数接收一个参数对象，其中 dateObj 包含当前单元格的日期信息：
dateObj.d number 日期（几号）
dateObj.e number 星期几
dateObj.m number 月份
dateObj.y number 年份
完整示例
<template>
<vxe-gantt v-bind="ganttOptions"></vxe-gantt>
</template>cellStyle vs cellClassName 对比
cellStyle 直接返回内联样式对象，无需额外 CSS 简单样式、动态变化较少、快速原型
cellClassName 返回类名，需在 CSS 中定义样式 复杂样式、需要复用、或需配合伪类/动画
两种方式可同时使用，内联样式优先级高于类样式。
通过 taskViewConfig.viewStyle.cellStyle 可以快速为甘特图日期单元格添加内联样式，满足项目中对特殊日期的高亮、区分需求。相比 cellClassName，它更轻量、无需管理额外 CSS 文件，适合样式逻辑简单、动态性强的场景
https://gantt.vxeui.com
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]