一、需求:
当 el-table
的宽度超出浏览器宽度时,尽管 el_table
底部会出现滚动条,但使用起来不太便捷,因为每次需要先滚动到底部才能使用 el-table
的滚动体,这显得相当繁琐。
为了提升体验,希望在 el-table
的宽度超出屏幕宽度时,即使没有滚动到底部,也能够在可视范围底部添加一个横向(左右)的滚动条,能够更方便地使用 el-table
。
(即系不需要拉到底部才可以显示滚动条)
二、安装:
npm install el-table-horizontal-scroll
三、注册指令:
在main.ts(全局注册)
import horizontalScroll from 'el-table-horizontal-scroll'// Vue3
app.use(horizontalScroll)
四、在页面使用:
v-horizontal-scroll
<el-table:data="data"v-horizontal-scroll
><el-table-columnfixed="left"label="a"prop="a"></el-table-column><el-table-columnlabel="b"prop="b"></el-table-column><el-table-columnlabel="c"prop="c"></el-table-column><el-table-columnlabel="d"prop="d"width="1600"></el-table-column>
</el-table>
属性 :
你可以使用 always
或 hover
,默认是 hover
,
当鼠标悬停在表格上时,滚动条会显示,
或者你可以将其更改为 always
,使滚动条始终显示
示例:
<el-table:data="data"v-horizontal-scroll="'always'"
><el-table-columnfixed="left"label="a"prop="a"></el-table-column><el-table-columnlabel="b"prop="b"></el-table-column><el-table-columnlabel="c"prop="c"></el-table-column>
</el-table>
五、在当前页面修改滚动条的css样式
使用深度穿透进行修改
(::v-deep
时,确保你的选择器放在括号内)
//滚动条 滑动时的背景颜色
::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);
}