Vue中实现表格吸底滚动条效果

1、安装

scss 复制代码
npm install el-table-horizontal-scroll

2、全局注册

javascript 复制代码
import horizontalScroll from 'el-table-horizontal-scroll'
Vue.use(horizontalScroll)

3、表格内引用

ini 复制代码
  <el-table 
       :data="tableData"
       border
       v-horizontal-scroll="'always'"
      >
</el-table>

4、属性

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

5、样式

css 复制代码
//滚动条 滑动时的背景颜色
::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);
}
相关推荐
天天扭码11 分钟前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder13 分钟前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte18 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang23 分钟前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子1 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z1 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录2 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子2 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试
1024小神2 小时前
cocos游戏开发中多角色碰撞,物理反弹后改变方向的实现逻辑
前端·javascript
ruanhongbiao2 小时前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui