vue 表格组件 vxe-table 修改滚动条样式-原生滚动条和虚拟滚动条

在表格数据展示中，滚动条是不可或缺的交互元素。vxe-table 默认使用浏览器原生滚动条，但原生滚动条样式受浏览器限制，无法跨浏览器保持统一。通过 useScrollbar 启用虚拟滚动条后，可以自由定制宽度、颜色、自动隐藏等，实现跨浏览器一致的视觉效果。

概述

原生滚动条：默认方式，样式受浏览器控制，无法跨浏览器统一。
虚拟滚动条：通过 useScrollbar: true 启用，支持自定义宽度、颜色、自动隐藏，跨浏览器表现一致。
宽度定制：通过 scrollbarConfig.width 设置滚动条宽度。
颜色定制：通过 CSS 变量修改轨道、滑块及其悬停/激活状态的颜色。
自动隐藏：通过 scrollbarConfig.autoHide 让滚动条在非滚动状态下自动隐藏。

核心配置

1. 启用虚拟滚动条

useScrollbar: true

默认 false，使用浏览器原生滚动条。
设为 true 后，scrollbarConfig 才会生效。

2. 控制滚动条显隐

useScrollbar: true,
scrollbarConfig: {
  xConfig: { visible: true }, // 横向滚动条
  yConfig: { visible: true }  // 纵向滚动条
}

3. 修改宽度

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

4. 修改背景色

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>
    X:<vxe-switch v-model="scrollbarConfig.xConfig.visible"></vxe-switch> Y:<vxe-switch v-model="scrollbarConfig.yConfig.visible"></vxe-switch>

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

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

const gridOptions = reactive({
  border: true,
  height: 300,
  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>

使用虚拟滚动条

默认是使用原生滚动条，可以通过 use-scrollbar 使用虚拟滚动条，功能非常强大，支持任意条样式，滚动条宽度，背景色，自动隐藏等；能跨浏览器保持样式统一

<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>

修改滚动条宽度

<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>

滚动条背景色

可以通过 css 变量修改滚动条背景色

<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>

自动隐藏

通过 scrollbar-config.autoHide 设置滚动条自动隐藏

<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: {
    autoHide: 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>

通过 useScrollbar 启用虚拟滚动条，结合 scrollbarConfig 的宽度、显隐、自动隐藏配置，以及 CSS 变量定制颜色，可以让表格滚动条在不同浏览器下保持统一，并完美融入项目主题。相比原生滚动条，虚拟滚动条在可控性与视觉一致性上都有明显优势，适合对 UI 要求较高的中后台系统。

https://vxetable.cn

posted @ 2026-10-15 14:05 独行者r2 阅读(1) 评论(0) 收藏举报

刷新页面返回顶部

leid6