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);
}
相关推荐
小lan猫3 分钟前
React学习笔记(一)
前端·react.js
晨米酱3 分钟前
JavaScript 中"对象即函数"设计模式
前端·设计模式
拜无忧4 分钟前
【教程】Nuxt v4 入门指南与实践 (vue前端角度开发)
前端·nuxt.js
云枫晖7 分钟前
手写Promise-什么是Promise
前端·javascript
拜无忧7 分钟前
html,svg,花海扩散效果
前端·css·svg
DevUI团队7 分钟前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能
RoyLin9 分钟前
TypeScript设计模式:责任链模式
前端·后端·typescript
一枚前端小能手9 分钟前
📋 前端复制那点事 - 5个实用技巧让你的复制功能更完美
前端·javascript
三小河11 分钟前
解决vite环境下调用获取二进制文件流 部分文件报错 (failed)net::ERR_INVALID_HTTP_RESPONSE)
前端
好好好明天会更好11 分钟前
pinia从定义到运用
前端·vue.js