vxe-table 滚动条样式

### 自定义 vxe-table 滚动条样式 在使用 `vxe-table` 时，可以通过自定义 CSS 样式来调整滚动条的外观。以下是实现自定义滚动条样式的示例代码： ```html <template> <div class="custom-scrollbar"> <vxe-table border show-overflow height="400" :scroll-y="{ enabled: true }" :data="tableData"> <vxe-column type="seq" width="100"></vxe-column> <vxe-column field="name" title="Name" sortable></vxe-column> <vxe-column field="role" title="Role"></vxe-column> <vxe-column field="sex" title="Sex"></vxe-column> </vxe-table> </div> </template> <script> export default { data() { return { tableData: [ { name: 'John', role: 'Developer', sex: 'Male' }, { name: 'Doe', role: 'Designer', sex: 'Female' }, { name: 'Smith', role: 'Tester', sex: 'Male' } ] }; } }; </script> <style scoped> /* 自定义滚动条样式 */ .custom-scrollbar ::-webkit-scrollbar { width: 8px; /* 滚动条宽度 */ height: 8px; /* 滚动条高度 */ } .custom-scrollbar ::-webkit-scrollbar-thumb { background-color: #888; /* 滚动条滑块颜色 */ border-radius: 4px; /* 滑块圆角 */ } .custom-scrollbar ::-webkit-scrollbar-thumb:hover { background-color: #555; /* 鼠标悬停时滑块颜色 */ } .custom-scrollbar ::-webkit-scrollbar-track { background-color: #f1f1f1; /* 滚动条轨道颜色 */ } </style> ``` #### 解释 1. 使用 `::webkit-scrollbar` 及其相关伪元素来自定义滚动条的样式[^2]。 2. 将表格包裹在一个具有特定类名（如 `custom-scrollbar`）的容器中，确保滚动条样式仅应用于该表格。 3. `::-webkit-scrollbar` 定义滚动条的整体宽度和高度。 4. `::-webkit-scrollbar-thumb` 定义滚动条滑块的颜色和圆角。 5. `::-webkit-scrollbar-track` 定义滚动条轨道的颜色。 ### 注意事项 - 上述样式适用于基于 Webkit 内核的浏览器（如 Chrome、Edge）。对于其他浏览器，可能需要额外的兼容性处理[^3]。 - 如果需要更复杂的滚动条样式，可以考虑使用第三方库（如 `perfect-scrollbar`）[^4]。