vue3Element-ui中el-table添加了竖向滚动条使用横向滚动条出现错位的问题

在Vue.js中结合Element UI库创建横向滚动表格（el-table），你可以使用Element UI提供的`el-table-column`组件以及自适应列宽的属性`show-overflow-tooltip`和`min-width`来解决错位问题，并通过设置`width`属性为百分比配合`auto-fit`模式来实现自动布局。 首先，在模板中，你可以这样配置el-table： ```html <template> <div class="table-container"> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="Name" width="20%" show-overflow-tooltip min-width="80px" ></el-table-column> <!-- 添加其他列 --> <el-table-column prop="otherColumn" label="Other Column" width="20%" <!-- 可调整列宽 --> :show-overflow-tooltip="true" min-width="80px" ></el-table-column> <!-- ... --> <el-table-column type="expand" label="Expand"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: 'Item 1', otherColumn: 'Data for Item 1' }, // 更多数据... ] }; } }; </script> <style scoped> .table-container { overflow-x: auto; /* 设置水平滚动 */ } </style> ``` 这里，`width`属性设置了列的初始宽度，`min-width`保证了最小显示宽度，而`show-overflow-tooltip`可以让超出内容有提示。同时，给包含表格的容器添加`overflow-x: auto`可以使其在内容过多时显示水平滚动条。 如果需要自动调整列宽，你可以将`width`属性设为百分比（如上例中的`20%`），然后启用`el-table`的`auto-fit`属性： ```html <el-table :data="tableData" :auto-fit="true" style="width: 100%"> ``` 这会使得列宽按照内容填充表格空间。

### 调整 el-table 横向滚动条的宽度或样式 在 Element-UI 的 `el-table` 组件中，调整横向滚动条的宽度或样式可以通过自定义 CSS 样式实现。以下是具体的实现方法： #### 自定义横向滚动条样式 通过覆盖默认的滚动条样式，可以调整横向滚动条的高度和外观。以下是一个完整的示例代码： ```css /* 修改横向滚动条的高度和颜色 */ .el-table__body-wrapper::-webkit-scrollbar { height: 15px; /* 设置滚动条高度 */ } /* 修改滚动条轨道的样式 */ .el-table__body-wrapper::-webkit-scrollbar-track { background-color: #f1f1f1; /* 设置轨道背景颜色 */ } /* 修改滚动条滑块的样式 */ .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #C0C0C0; /* 设置滑块颜色 */ border-radius: 8px; /* 设置滑块圆角 */ } /* 鼠标悬停时的滚动条样式 */ .el-table__body-wrapper:hover::-webkit-scrollbar-thumb { background-color: #A0A0A0; /* 设置悬停时滑块颜色 */ } ``` #### 动态调整滚动条样式 如果需要动态调整滚动条样式，可以引入外部插件 `el-table-horizontal-scroll`[^1]。该插件支持动态修改滚动条的样式，并提供了一些额外的功能，例如鼠标悬停时放大滚动条等效果。 #### 解决固定列错位问题 当表格包含固定列时，可能会出现滚动条与固定列对不齐的问题。为了解决这一问题，可以添加以下样式[^2]： ```css /* 当表格没有滚动条时，确保固定列高度一致 */ .el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right, .el-table__body-wrapper.is-scrolling-none~.el-table__fixed { height: 100% !important; } /* 优化左右对不上的问题 */ .el-table__fixed-body-wrapper .el-table__body { padding-bottom: 15px; /* 滚动条高度 */ } ``` #### 示例代码 以下是一个完整的 Vue 示例，展示如何调整 `el-table` 的横向滚动条样式： ```vue <template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { date: "2023-01-01", name: "张三", address: "北京市朝阳区" }, { date: "2023-01-02", name: "李四", address: "上海市浦东新区" }, ], }; }, }; </script> <style scoped> /* 修改横向滚动条样式 */ .el-table__body-wrapper::-webkit-scrollbar { height: 15px; /* 设置滚动条高度 */ } .el-table__body-wrapper::-webkit-scrollbar-track { background-color: #f1f1f1; /* 设置轨道背景颜色 */ } .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #C0C0C0; /* 设置滑块颜色 */ border-radius: 8px; /* 设置滑块圆角 */ } .el-table__body-wrapper:hover::-webkit-scrollbar-thumb { background-color: #A0A0A0; /* 设置悬停时滑块颜色 */ } </style> ``` #### 注意事项 1. 如果需要全局调整滚动条样式，可以将样式定义在全局样式文件中。 2. 使用 `/deep/` 或 `>>>` 穿透作用域限制，以覆盖 `el-table` 的默认样式[^3]。 3. 在不同浏览器中，滚动条样式的兼容性可能有所不同，请根据实际需求进行测试和调整。 ---