【Vue】elementui的table组件滚动条怎么换成他们自己的滚动条样式？

最近要用到element里面table组件的固定表头，表格内容滚动的功能，如图：

【Vue】elementui的table组件滚动条怎么换成他们自己的滚动条样式？

这滚动条实在是太丑了，element虽然官网没说，但是人家是有自己的滚动条组件的，而且我也在用，如图：

【Vue】elementui的table组件滚动条怎么换成他们自己的滚动条样式？

现在的问题是涉及到table组件内部更换滚动条样式，小弟实在是不会，有大佬给解决一下吗，或者element为什么不把table组件的滚动条换成他们设计的美美的滚动条呢？实在是不解！

回答

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
background-color: #fff;
}
::-webkit-scrollbar-thumb {
    // border-radius:5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: rgba(0, 0, 0, .1)
}
把这代码 放到app.vue的 css样式里面。或者放index.html的css里面。总之影响全局的就好。
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
::-webkit-scrollbar  
{  
    width: 16px;  /*滚动条宽度*/
    height: 16px;  /*滚动条高度*/
}  
/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track  
{  
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  
    border-radius: 10px;  /*滚动条的背景区域的圆角*/
    background-color: red;/*滚动条的背景颜色*/  
}  
/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb  
{  
    border-radius: 10px;  /*滚动条的圆角*/
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  
    background-color: green;  /*滚动条的背景颜色*/
}

这是内核为webkit的滚动条样式改变写法，如果是火狐则是-moz-,如果想兼容所有浏览器，参考这篇文章。

样式覆盖
1、::-webkit-scrollbar 定义了滚动条整体的样式；

2、::-webkit-scrollbar-thumb 滑块部分；

3、::-webkit-scrollbar-thumb 轨道部分；

还是想要element的滚动条样式，鼠标滑出是会隐藏的

<el-scrollbar>
    <your-components />
</el-scrollbar>

el-scrollbar支持的属性和方法可以去翻看下源码，在 packages/scrollbar/src/main.js

我的思路是隐藏表格的头部，el-table有个属性show-header可以设置，然后自己模拟一个表头，把el-table放进el-scrollbar内，基础的表格差不多就实现了滚动条替换，但是带选择的就需要自己再自定义事件了

以上是 【Vue】elementui的table组件滚动条怎么换成他们自己的滚动条样式？ 的全部内容， 来源链接： utcz.com/a/81794.html

回到顶部