elementui的table组件滚动条怎么换成他们自己的滚动条样式?

面对疾风吧
  • 189

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

clipboard.png

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

clipboard.png

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

回复
阅读 12k
6 个回答
  ::-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

queralwing
  • 5
新手上路,请多包涵

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

你知道吗?

宣传栏