Vue中实现表格吸底滚动条效果

1、安装

npm install el-table-horizontal-scroll

2、全局注册

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

3、表格内引用

  <el-table 
       :data="tableData"
       border
       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);
}