广告位联系
返回顶部
分享到

el-table滚动条样式修改方法

css 来源:互联网 作者:佚名 发布时间:2024-08-28 22:04:40 人浏览
摘要

我们知道,el-table滚动条样式默认取的好像是我们全局滚动条的样式,当我们修改了全局滚动条的样式后,table表格的滚动条样式也随之而变。 比如,当我们修改了全局滚动条的样式,使其变得

我们知道,el-table滚动条样式默认取的好像是我们全局滚动条的样式,当我们修改了全局滚动条的样式后,table表格的滚动条样式也随之而变。

比如,当我们修改了全局滚动条的样式,使其变得窄一点

1

2

3

4

5

6

7

8

9

10

11

12

// 滚动条样式

::-webkit-scrollbar {

  width: 6px;

  height: 6px;

}

::-webkit-scrollbar-track {

  background: rgb(239, 239, 239);

}

::-webkit-scrollbar-thumb {

  background: #bfbfbf;

  border-radius: 10px;

}

 但是,表格的滚动条也随之边的很窄,不方便用户操作,我们就要对表格进行单独的滚动条样式修改,如下

1

2

3

4

.el-table__body-wrapper::-webkit-scrollbar {

  width: 10px;

  height: 10px;

}

 这样看着很完美,但是如果我们有固定列,问题又随之出现了,如下图

 为啥会这样呢? 审查一下元素,发现是动态计算的

 我们再看看el-table的源码,看看他得高度是如何计算的

 发现了这个变量this.gutterWidth = scrollbarWidth(),这个scrollbarWidth是什么鬼呢?我们继续追查

 原来我们框架在渲染组件之前,在body中创建了一个class名为el-scrollbar__wrap的div,并获取了这个div的滚动条宽度。

找到了根原因,那么我们是不是再修改一下这个class名为el-scrollbar__wrap的div的滚动条样式,就解决了我们的问题呢?

1

2

3

4

5

6

.el-table__body-wrapper, .el-scrollbar__wrap {

  &::-webkit-scrollbar {

    width: 10px;

    height: 10px;

  }

}

果然,完美解决!


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计