vue甘特图vxe-gantt自定义任务视图单元格的背景颜色
<p>通过 taskViewConfig.viewStyle.cellStyle 可以直接为甘特图日期轴上的每一个单元格设置内联样式，实现灵活的背景色、边框、字体等视觉效果。</p><h2 id="配置说明">配置说明</h2>
<p>样式配置位于 taskViewConfig.viewStyle.cellStyle，它是一个函数，接收当前单元格对应的日期对象，返回一个样式对象</p>
<pre><code class="language-javascript">taskViewConfig: {
viewStyle: {
cellStyle({ dateObj }) {
// 根据日期逻辑返回样式对象
return {
backgroundColor: '#f8e4e4',
color: '#333'
}
}
}
}
</code></pre>
<p>参数 cellStyle 函数接收一个参数对象，其中 dateObj 包含当前单元格的日期信息：<br>
dateObj.d number 日期（几号）<br>
dateObj.e number 星期几<br>
dateObj.m number 月份<br>
dateObj.y number 年份</p>
<h2 id="完整示例">完整示例</h2>
<p><img src="https://img2024.cnblogs.com/blog/3765549/202603/3765549-20260325213720488-499764922.png"></p>
<pre><code class="language-html"><template>
<div>
<vxe-gantt v-bind="ganttOptions"></vxe-gantt>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const ganttOptions = reactive({
taskBarConfig: {
showProgress: true,
barStyle: {
round: true,
bgColor: '#f56565',
completedBgColor: '#65c16f'
}
},
taskViewConfig: {
viewStyle: {
cellStyle ({ dateObj }) {
// 高亮周日
if (dateObj.e === 0) {
return {
backgroundColor: '#f8e4e4'
}
}
// 高亮周三
if (dateObj.e === 2) {
return {
backgroundColor: '#c0f9f3'
}
}
}
}
},
columns: [
{ field: 'title', title: '任务名称' },
{ field: 'start', title: '开始时间', width: 100 },
{ field: 'end', title: '结束时间', width: 100 }
],
data: [
{ id: 10001, title: 'A项目', start: '2024-03-01', end: '2024-03-04', progress: 3 },
{ id: 10002, title: '城市道路修理进度', start: '2024-03-03', end: '2024-03-08', progress: 10 },
{ id: 10003, title: 'B大工程', start: '2024-03-03', end: '2024-03-11', progress: 90 },
{ id: 10004, title: '超级大工程', start: '2024-03-05', end: '2024-03-11', progress: 15 },
{ id: 10005, title: '地球净化项目', start: '2024-03-08', end: '2024-03-15', progress: 100 },
{ id: 10006, title: '一个小目标项目', start: '2024-03-10', end: '2024-03-21', progress: 5 },
{ id: 10007, title: '某某计划', start: '2024-03-15', end: '2024-03-24', progress: 70 },
{ id: 10008, title: '某某科技项目', start: '2024-03-20', end: '2024-03-29', progress: 50 },
{ id: 10009, title: '地铁建设工程', start: '2024-03-19', end: '2024-03-20', progress: 5 },
{ id: 10010, title: '铁路修建计划', start: '2024-03-12', end: '2024-03-20', progress: 10 }
]
})
</script>
</code></pre>
<h2 id="cellstyle-vs-cellclassname-对比">cellStyle vs cellClassName 对比</h2>
<p>cellStyle 直接返回内联样式对象，无需额外 CSS 简单样式、动态变化较少、快速原型<br>
cellClassName 返回类名，需在 CSS 中定义样式 复杂样式、需要复用、或需配合伪类/动画<br>
两种方式可同时使用，内联样式优先级高于类样式。</p>
<p>通过 taskViewConfig.viewStyle.cellStyle 可以快速为甘特图日期单元格添加内联样式，满足项目中对特殊日期的高亮、区分需求。相比 cellClassName，它更轻量、无需管理额外 CSS 文件，适合样式逻辑简单、动态性强的场景</p>
<p>https://gantt.vxeui.com</p><br><br>
来源：https://www.cnblogs.com/zhiy3/p/19772452
頁:
[1]