element-ui el-table 鼠标移入滚动条出现 移出表格滚动条隐藏
- 使用el-table的两个事件
cell-mouse-leave // 当单元格 hover 退出时会触发该事件
cell-mouse-enter // 当单元格 hover 进入时会触发该事件
- 我这里用到了jQuery(不会引入的可以去搜一下)
<el-table
height='500'
:data="userList"
style="width: 100%"
:header-cell-style="{
background: '#FAFAFA',
color: '#000000',
borderRight: '1px solid #fff'
}"
height="500"
class="commonScrollbarTable"
@cell-mouse-enter="enter"
@cell-mouse-leave="leave"
>
//内容省略
</el-table>
methods: {
enter() {
this.$('.commonScrollbarTable').addClass('scrollbarShow')
},
leave() {
this.$('.commonScrollbarTable').removeClass('scrollbarShow')
}
}
// css部分
//滚动条的宽度
.commonScrollbarTable /deep/ .el-table__body-wrapper::-webkit-scrollbar {
width: 6px;
height: 10px;
display: none;
}
//滚动条的滑块
.commonScrollbarTable /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: rgb(211, 213, 217);
border-radius: 15px;
}
.scrollbarShow /deep/ .el-table__body-wrapper::-webkit-scrollbar {
display: block;
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/64819.html
