vue 表格组件 vxe-table 修改滚动条样式，修改滚动条样式，统一宽度、颜色与自动隐藏

在不同浏览器中，原生滚动条的样式差异较大，且可定制的属性有限。vxe-table 提供了虚拟滚动条能力，启用后可跨浏览器保持一致的滚动条样式，并支持自定义宽度、背景色、自动隐藏等。本文介绍如何全局启用虚拟滚动条，以及如何统一调整宽度、颜色和自动隐藏行为。

功能概述

虚拟滚动条：通过 useScrollbar 启用，替代浏览器原生滚动条，跨浏览器样式一致。
全局启用：通过 VxeUI.setConfig 全局配置，或通过父组件 use-scrollbar 让子孙组件继承。
宽度定制：通过 scrollbarConfig.width 设置滚动条宽度，可结合滑块动态调整。
颜色定制：通过 CSS 变量修改轨道、滑块及其悬停/激活状态颜色。
自动隐藏：通过 scrollbarConfig.autoHide 让滚动条在非滚动状态下自动隐藏。

原生滚动条与虚拟滚动条对比

特性	原生滚动条	虚拟滚动条
启用方式	默认	useScrollbar: true
跨浏览器一致性	否，样式受浏览器限制	是，样式统一
宽度定制	受限	scrollbarConfig.width
颜色定制	受限	CSS 变量
自动隐藏	不支持	scrollbarConfig.autoHide
显隐控制	不可控	xConfig.visible / yConfig.visible

全局启用

通过全局配置

javascript 复制代码

VxeUI.setConfig({
  useScrollbar: true // 全部组件统一启用虚拟滚动条
})

适合整个项目统一风格，一次配置全局生效。

通过父组件启用，子孙组件自动继承

javascript 复制代码

<vxe-layout-container use-scrollbar>
  ...
     <vxe-grid ... />
  ...
</vxe-layout-container>

在布局容器上启用 use-scrollbar，其内部所有 vxe 组件自动继承，适合按模块或页面范围启用。

代码

html 复制代码

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

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

const gridOptions = reactive({
  border: true,
  height: 300,
  useScrollbar: true,
  columns: [
    { field: 'seq', type: 'seq', width: 70 },
    { field: 'name', title: 'Name', minWidth: 300 },
    { field: 'sex', title: 'Sex', minWidth: 200 },
    { field: 'age', title: 'Age', minWidth: 200 },
    { field: 'address', title: 'Address', minWidth: 400 }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 24, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'PM', sex: 'Man', age: 19, address: 'Shanghai' },
    { id: 10005, name: 'Test5', role: 'Test', sex: 'Man', age: 18, address: 'Guangzhou' },
    { id: 10006, name: 'Test6', role: 'Develop', sex: 'Man', age: 32, address: 'Guangzhou' },
    { id: 10007, name: 'Test7', role: 'Test', sex: 'Women', age: 22, address: 'Shanghai' },
    { id: 10008, name: 'Test8', role: 'PM', sex: 'Women', age: 32, address: 'Shanghai' },
    { id: 10009, name: 'Test9', role: 'Develop', sex: 'Women', age: 44, address: 'Shanghai' },
    { id: 10010, name: 'Test10', role: 'Develop', sex: 'Man', age: 39, address: 'Shanghai' }
  ]
})
</script>

滚动条宽度

html 复制代码

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

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

const gridOptions = reactive({
  border: true,
  height: 300,
  useScrollbar: true,
  scrollbarConfig: {
    width: 6
  },
  columns: [
    { field: 'seq', type: 'seq', width: 70 },
    { field: 'name', title: 'Name', minWidth: 300 },
    { field: 'sex', title: 'Sex', minWidth: 200 },
    { field: 'age', title: 'Age', minWidth: 200 },
    { field: 'address', title: 'Address', minWidth: 400 }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 24, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'PM', sex: 'Man', age: 19, address: 'Shanghai' },
    { id: 10005, name: 'Test5', role: 'Test', sex: 'Man', age: 18, address: 'Guangzhou' },
    { id: 10006, name: 'Test6', role: 'Develop', sex: 'Man', age: 32, address: 'Guangzhou' },
    { id: 10007, name: 'Test7', role: 'Test', sex: 'Women', age: 22, address: 'Shanghai' },
    { id: 10008, name: 'Test8', role: 'PM', sex: 'Women', age: 32, address: 'Shanghai' },
    { id: 10009, name: 'Test9', role: 'Develop', sex: 'Women', age: 44, address: 'Shanghai' },
    { id: 10010, name: 'Test10', role: 'Develop', sex: 'Man', age: 39, address: 'Shanghai' }
  ]
})
</script>

滚动条背景色

html 复制代码

<template>
  <div>
    <vxe-grid
      v-bind="gridOptions"
      :style="{
        '--vxe-ui-scrollbar-track-background-color': trackBgColor,
        '--vxe-ui-scrollbar-thumb-background-color': thumbBgColor,
        '--vxe-ui-scrollbar-thumb-hover-background-color': thumbHoverBgColor,
        '--vxe-ui-scrollbar-thumb-active-background-color': thumbActiveBgColor
      }"
    ></vxe-grid>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { VxeUI } from 'vxe-table'

const gridOptions = reactive({
  border: true,
  height: 300,
  useScrollbar: true,
  columns: [
    { field: 'seq', type: 'seq', width: 70 },
    { field: 'name', title: 'Name', minWidth: 300 },
    { field: 'sex', title: 'Sex', minWidth: 200 },
    { field: 'age', title: 'Age', minWidth: 200 },
    { field: 'address', title: 'Address', minWidth: 400 }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 24, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'PM', sex: 'Man', age: 19, address: 'Shanghai' },
    { id: 10005, name: 'Test5', role: 'Test', sex: 'Man', age: 18, address: 'Guangzhou' },
    { id: 10006, name: 'Test6', role: 'Develop', sex: 'Man', age: 32, address: 'Guangzhou' },
    { id: 10007, name: 'Test7', role: 'Test', sex: 'Women', age: 22, address: 'Shanghai' },
    { id: 10008, name: 'Test8', role: 'PM', sex: 'Women', age: 32, address: 'Shanghai' },
    { id: 10009, name: 'Test9', role: 'Develop', sex: 'Women', age: 44, address: 'Shanghai' },
    { id: 10010, name: 'Test10', role: 'Develop', sex: 'Man', age: 39, address: 'Shanghai' }
  ]
})

const trackBgColor = ref('transparent')
const thumbBgColor = ref('#00BFFF')
const thumbHoverBgColor = computed(() => VxeUI.color.darken(thumbBgColor.value, 5))
const thumbActiveBgColor = computed(() => VxeUI.color.darken(thumbBgColor.value, 10))
</script>

参数说明

修改滚动条宽度

javascript 复制代码

useScrollbar: true,
scrollbarConfig: {
  width: 6 // 滚动条宽度（px）
}

自动隐藏

javascript 复制代码

useScrollbar: true,
scrollbarConfig: {
  autoHide: true // 滚动条自动隐藏
}

修改滚动条背景色

html 复制代码

<vxe-grid
  v-bind="gridOptions"
  :style="{
    '--vxe-ui-scrollbar-track-background-color': trackBgColor,
    '--vxe-ui-scrollbar-thumb-background-color': thumbBgColor,
    '--vxe-ui-scrollbar-thumb-hover-background-color': thumbHoverBgColor,
    '--vxe-ui-scrollbar-thumb-active-background-color': thumbActiveBgColor
  }"
></vxe-grid>

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	滑块激活背景色

通过 useScrollbar 启用虚拟滚动条，结合全局配置或父组件继承实现统一启用，再通过 scrollbarConfig.width、CSS 变量与 autoHide 定制宽度、颜色和自动隐藏行为，可以让表格滚动条在所有浏览器下保持一致的视觉风格，并完美融入项目主题。对于中后台系统这类对 UI 一致性要求较高的场景，虚拟滚动条是更推荐的选择。

https://vxetable.cn