当前位置: 首页 > article >正文

Vue中实现表格吸底滚动条效果,列太多时左右滚动条始终显示在页面中

1、安装

npm install el-table-horizontal-scroll

2、全局注册(main.js)

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

如下图,在main.js加上上面的代码

 3、表格内引用

<el-table :data="tableData"  v-horizontal-scroll="'always'" > </el-table>

4、属性

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

5、样式(也可以不用写)

//滚动条 滑动时的背景颜色
::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);
}

http://www.lryc.cn/news/2402203.html

相关文章:

  • BeeWorks 协同办公能力:局域网内企业级协作的全场景重构
  • Mermaid 绘图--以企业权限视图为例
  • Redis(02)Win系统如何将Redis配置为开机自启的服务
  • C++课设:高效的日程管理系统
  • 功能测试、性能测试、安全测试详解
  • 提示词指南 --- 提示词的基本结构
  • UI学习—cell的复用和自定义cell
  • 20250605使用boot-repair来恢复WIN10和ubuntu22.04.6双系统的启动
  • 网络安全面试题目(无答案)
  • JavaScript性能优化实战
  • 接口安全SOAPOpenAPIRESTful分类特征导入项目联动检测
  • 视频汇聚平台EasyCVR“明厨亮灶”方案筑牢旅游景区餐饮安全品质防线
  • sql server如何创建表导入excel的数据
  • 仓库自动化搬运:自动叉车与AGV选型要点及核心技术解析
  • java UDP 模板
  • 【亲测有效】Mybatis-Plus更新字段为null
  • NLP学习路线图(二十五):注意力机制
  • 05 APP 自动化- Appium 单点触控 多点触控
  • MyBatis-Plus LambdaQuery 高级用法:JSON 路径查询与条件拼接的全场景解析
  • [AI绘画]sd学习记录(一)软件安装以及文生图界面初识、提示词写法
  • SpringBoot(八) --- SpringBoot原理
  • SpringBoot自动化部署全攻略:CI/CD高效实践与避坑指南
  • idea json生成实体类
  • C# 类和继承(抽象成员)
  • gitlab rss订阅失败
  • 鸿蒙仓颉语言开发实战教程:商城登录页
  • JavaScript 数组与流程控制:从基础操作到实战应用
  • STM32中自动生成Flash地址的方法
  • Matlab | MATLAB 中的插值详解
  • SkyWalking架构深度解析:分布式系统监控的利器