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);
}
相关推荐
栈老师不回家9 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙15 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠19 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds39 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
阿伟来咯~1 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨2 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js