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);
}