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);
}
相关推荐
wangbing1125几秒前
界面规范11-对话框
javascript·vue.js·elementui
roman_日积跬步-终至千里22 分钟前
【系统架构设计(25)】Web应用服务器与现代架构
前端·架构·系统架构
yshhuang25 分钟前
在Windows上搭建开发环境
前端·后端
littleplayer26 分钟前
Redux在iOS中的使用
前端
跟橙姐学代码27 分钟前
Python里的“管家婆”:带你玩转os库的所有神操作
前端·python·ipython
jingling55528 分钟前
uniapp | 快速上手ThorUI组件
前端·笔记·前端框架·uni-app
UrbanJazzerati28 分钟前
可拖拽的进度条组件实战:实现思路与Demo
前端·面试
Cache技术分享31 分钟前
188. Java 异常 - Java 异常处理规范
前端·后端
不一样的少年_34 分钟前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码(附源码)
前端·vue.js·设计模式