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

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

clipboard.png

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

clipboard.png

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

阅读 10.3k
评论
    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里面。总之影响全局的就好。
      • 2.8k
      /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
      ::-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

              • 5
              • 新人请关照

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

                撰写回答

                登录后参与交流、获取后续更新提醒

                相似问题
                推荐文章