vue 甘特图组件 vxe-gantt 定制化/美化滚动条样式

甘特图内容区域通常较宽，默认滚动条会占据较多视觉空间，显得笨重。vxe-gantt 与 vxe-table 一样支持虚拟滚动条，通过 useScrollbar 启用后，可以自定义滚动条宽度、自动隐藏、覆盖式悬浮等效果，让界面更精致。本文介绍如何调细滚动条并启用自动隐藏，实现更美观的滚动条样式。

参数

启用虚拟滚动条

useScrollbar: true

这是使用 scrollbarConfig 的前提。vxe-gantt 内部用虚拟滚动条替代浏览器原生滚动条，使样式在所有浏览器下保持一致，也便于控制宽度与隐藏行为

调细滚动条

scrollbarConfig: {
  // width: 4
}

常见取值 4~8px，较细的滚动条视觉上更轻盈，适合内容密集的甘特图。若希望保留默认宽度，可不设置 width。

自动隐藏

scrollbarConfig: {
  autoHide: true
}

• autoHide: true：滚动条在非滚动状态下自动隐藏，滚动或悬停时显示。
• 结合较细的宽度，可获得“平时几乎不可见，滚动时短暂出现”的清爽效果。

悬浮式

scrollbarConfig: {
  fluentOverlay: true
}

是否启用悬浮叠加滚动条，默认细线，鼠标悬浮上去滑块变宽

自定义滚动条颜色

<vxe-gantt
  v-bind="ganttOptions"
  :style="{
    '--vxe-ui-scrollbar-track-background-color': 'transparent',
    '--vxe-ui-scrollbar-thumb-background-color': '#00BFFF',
    '--vxe-ui-scrollbar-thumb-hover-background-color': '#00A8E8',
    '--vxe-ui-scrollbar-thumb-active-background-color': '#0090CC'
  }"
></vxe-gantt>

CSS 变量	说明
--vxe-ui-scrollbar-track-background-color	轨道背景色
--vxe-ui-scrollbar-thumb-background-color	滑块背景色
--vxe-ui-scrollbar-thumb-hover-background-color	滑块悬停背景色
--vxe-ui-scrollbar-thumb-active-background-color	滑块激活背景色

代码

滚动条调细样式比较好看

<template>
  <div>
    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const ganttOptions = reactive({
  border: true,
  height: 400,
  taskBarConfig: {
    showProgress: true,
    showContent: true
  },
  taskViewConfig: {
    tableStyle: {
      width: 480
    }
  },
  useScrollbar: true,
  scrollbarConfig: {
    // width: 4,
    autoHide: true,
    fluentOverlay: true
  },
  columns: [
    { type: 'seq', field: 'seq', width: 70 },
    { field: 'title', title: '任务名称', minWidth: 300 },
    { field: 'start', title: '开始时间', width: 100 },
    { field: 'end', title: '结束时间', width: 100 },
    { field: 'responsibleBy', title: '负责人', width: 140 },
    { field: 'description', title: '备注', width: 200 },
    { field: 'createBy', title: '创建人', width: 160 },
    { field: 'updateBy', title: '最后更新人', width: 180 },
    { field: 'createDate', title: '创建时间', width: 140 },
    { field: 'updateDate', title: '更新时间', width: 140 }
  ],
  data: [
    { id: 10001, title: '任务R790', start: '2024-03-01', end: '2024-03-04', progress: 3, responsibleBy: '张三', description: '', createBy: '小明', updateBy: '小陈', createDate: '2024-03-01', updateDate: '2024-03-02', imgList: ['https://vxeui.com/resource/img/bq475.gif'], fileList: [{ name: 'fj577.jpg', url: 'https://vxeui.com/resource/img/fj577.jpg', size: 6054 }] },
    { id: 10002, title: '任务C30456572349', start: '2024-03-03', end: '2024-03-08', progress: 10, responsibleBy: '小徐', description: '', createBy: '小徐', updateBy: '小徐', createDate: '2024-03-01', updateDate: '2024-03-02', imgList: ['https://vxeui.com/resource/img/bq673.gif'], fileList: [] },
    { id: 10003, title: '任务E563', start: '2024-03-03', end: '2024-03-11', progress: 90, responsibleBy: '李四', description: '不备注', createBy: '李四', updateBy: '老黄', createDate: '2024-03-01', updateDate: '2024-03-02', imgList: [], fileList: [{ name: 'bq987.gif', url: 'https://vxeui.com/resource/img/bq987.gif', size: 6054 }] },
    { id: 10004, title: '任务P687', start: '2024-03-05', end: '2024-03-11', progress: 15, responsibleBy: '小陈', description: '', createBy: '小红', updateBy: '小陈', createDate: '2024-03-01', updateDate: '2024-03-02', imgList: ['https://vxeui.com/resource/img/fj577.jpg'], fileList: [] },
    { id: 10005, title: '任务L8412430903', start: '2024-03-08', end: '2024-03-15', progress: 100, responsibleBy: '小李', description: '备注描述', createBy: '小李', updateBy: '小李', createDate: '2024-03-01', updateDate: '2024-03-02', imgList: [], fileList: [] },
    { id: 10006, title: '任务B567', start: '2024-03-10', end: '2024-03-21', progress: 5, responsibleBy: '老六', description: '任务备注备注备注', createBy: '小陈', updateBy: '王五', createDate: '2024-03-01', updateDate: '2024-03-02', imgList: ['https://vxeui.com/resource/img/fj124.jpeg'], fileList: [{ name: 'fj586.pn', url: 'https://vxeui.com/resource/img/fj586.png', size: 75064 }] },
    { id: 10007, title: '任务V513802134450', start: '2024-03-15', end: '2024-03-24', progress: 70, responsibleBy: '小红', description: '', createBy: '张三', updateBy: '小红', createDate: '2024-03-01', updateDate: '2024-03-02', imgList: ['https://vxeui.com/resource/img/fj581.jpeg'], fileList: [] },
    { id: 10008, title: '任务G110', start: '2024-03-20', end: '2024-03-29', progress: 50, responsibleBy: '王五', description: '', createBy: '小明', updateBy: '小徐', createDate: '2024-03-01', updateDate: '2024-03-02', imgList: ['https://vxeui.com/resource/img/fj586.png'], fileList: [{ name: 'fj843.jpg', url: 'https://vxeui.com/resource/img/fj843.jpg', size: 10240 }] },
    { id: 10009, title: '任务I802', start: '2024-03-19', end: '2024-03-20', progress: 5, responsibleBy: '老黄', description: '备注信息备注信息', createBy: '李四', updateBy: '小明', createDate: '2024-03-01', updateDate: '2024-03-02', imgList: [], fileList: [] },
    { id: 10010, title: '任务K778', start: '2024-03-12', end: '2024-03-20', progress: 10, responsibleBy: '小明', description: '', createBy: '王五', updateBy: '老黄', createDate: '2024-03-01', updateDate: '2024-03-02', imgList: ['https://vxeui.com/resource/img/fj843.jpg'], fileList: [] }
  ]
})
</script>

通过 useScrollbar 启用虚拟滚动条，再结合 scrollbarConfig.width 调细宽度、autoHide 自动隐藏、fluentOverlay 覆盖式悬浮，以及 CSS 变量定制颜色，可以让甘特图的滚动条更精致、不抢内容风头。对于任务密集、时间跨度大的甘特图场景，细而自动隐藏的滚动条能显著提升界面的清爽度。

https://gantt.vxeui.com