element-ui el-table 鼠标移入滚动条出现移出表格滚动条隐藏

最新推荐文章于 2024-08-19 11:53:47 发布

F-Fanger

最新推荐文章于 2024-08-19 11:53:47 发布

阅读量2.5k

点赞数 1

分类专栏： vue vue+element

本文链接：https://blog.csdn.net/qq_41287158/article/details/109600234

版权

vue+element 同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

vue

21 篇文章 1 订阅

订阅专栏

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