当前位置：首页 > ops >正文

el-table滚动条，都悬浮在页面的底层显示，表格吸底滚动条效果

ops 2025/8/28 11:56:52

1、安装

npm install el-table-horizontal-scroll

2、全局注册，在main.js文件中

import horizontalScroll from 'el-table-horizontal-scroll'
Vue.use(horizontalScroll)

3.只需要这两句

     :class="{'notShowScroll': noShowScroll}"v-horizontal-scroll="'always'"

完整代码，表格内引用

  <el-table :data="tableData"borderv-horizontal-scroll="'always'":class="{'notShowScroll': noShowScroll}">
</el-table>

你可以使用 always 或 hover，默认是 hover，当鼠标悬停在表格上时，滚动条会显示，或者你可以将其更改为 always，使滚动条始终显示

4.我在全局样式index.scss这个文件中添加如下代码，不然苹果系统不生效

.notShowScroll{.el-table-horizontal-scrollbar{.is-horizontal{opacity: 0 !important;}}
}

样式兼容苹果系统

/滚动条 滑动时的背景颜色
::v-deep(.el-scrollbar__thumb) {background-color:#B2C403;
}
//鼠标悬停滚动条的大小
::v-deep(.el-table-horizontal-scrollbar:hover) {transform: scaleY(1.5) translateY(-10%);filter: brightness(0.1);
}

  methods: {calculateScrollableHeight() {// 兼容不同浏览器的 scrollHeight，不加苹果系统不生效const scrollHeight = Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);// 视口高度const clientHeight = document.documentElement.clientHeight;// 计算可滚动高度console.log(scrollHeight,'scrollHeight')console.log(clientHeight,'clientHeight')console.log(scrollHeight - clientHeight,'可滚动高度')if (scrollHeight - clientHeight > 51){this.noShowScroll = false}else{this.noShowScroll = true}},},//页面加载完毕执行created() {this.$nextTick(() => {this.calculateScrollableHeight()})
}