方法1、在el-table上手动添加滚动条 1、在el-table上方添加一个div,div的宽度和表格的宽度相同。 <div ref="topScroll" class="top-scroll"> <div class="top-scroll-content" :style="{ width: topScrollWidth }"></div> </div> <el-table ref="tableRef" :data="list" v-loading.body="listLoad...
1. 确定el-table的滚动条样式修改方法 Element UI的el-table组件在内容超出容器大小时会自动生成滚动条。我们可以通过覆盖默认的滚动条样式来自定义其外观。 2. 编写CSS样式来覆盖默认的滚动条样式 在Vue项目的CSS文件中,编写自定义的滚动条样式。以下是一个示例,展示了如何修改滚动条的宽度、颜色等属性: css /* ...
/*table一条合计行滚动条样式*/ .el-table{ overflow:auto; } .el-table .el-table__body-wrapper, .el-table .el-table__header-wrapper, .el-table .el-table__footer-wrapper{ overflow:visible; } .el-table::after{ position:relative!important; ...
</el-table> </template> <style scoped> /*覆盖el-table的滚动条样式*/ .el-table__body-wrapper::-webkit-scrollbar { width: 8px; } .el-table__body-wrapper::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #ccc; } .el-table__body-wrapper::-webkit-scrollbar-track {...
滚动条样式: 全局el-table *::-webkit-scrollbar { width: 4px; height: 10px; background-color: transparent; } /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ *::-webkit-scrollbar-track { background-color: #8db4fd; border-radius: 2px; } /*定义滚动条轨道 内阴影+圆角*/ *::...
当el-table的数据条数过多的时候,我们就要固定el-table的表头,从而实现竖向滚动的效果,不过默认的滚动条样式不太好看,所以我们可以修改一下滚动条的样式。其实很简单,css加上样式设置即可。 修改前的滚动条样式 修改语句 // 设置滚动条的宽度 /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 10...
/*table⼀条合计⾏滚动条样式*/ .el-table{ overflow: auto;} .el-table .el-table__body-wrapper,.el-table .el-table__header-wrapper,.el-table .el-table__footer-wrapper{ overflow: visible;} .el-table::after{ position:relative !important;} 合计⾏统计⽅法：getSummaries(param) { ...
或者参考以下的css样式代码: // 滚动条的宽度/deep/.el-table__body-wrapper::-webkit-scrollbar{width:8px;// 横向滚动条height:8px;// 纵向滚动条 必写}// 滚动条的滑块/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb{background-color:#ddd;border-radius:3px;} ...
在 使用Vue 3.0 和 Element Plus 中修改 el-table 的滚动条样式,可能遇到了样式不生效的问题。这通常是因为 Element Plus 使用了自定义的滚动条组件 el-scrollbar,而不是浏览器默认的滚动条。因此,需要针对 el-scrollbar 组件进行样式定制。 <stylescoped>/* 滚动条整体部分 */::v-deep .el-scrollbar__bar...