概述
转载至 ::https://blog.csdn.net/Web_chicken/article/details/119955900?spm=1001.2014.3001.5506
我直接嘛代码复制的,但是显示不出来 我很奇怪,于是乎 加了/deep/ 和,!important提升权重 ,发现还是不行
于是乎我在 这位大佬的基础上 ::-webkit-scrollbar 加上了 display:block,显示出来了, 出来了 可以根据需求更改颜色之类的 ,elementui(2版本)也没有说怎么会展示,
华丽的分割线=====================
/deep/.el-table__body-wrapper::-webkit-scrollbar {
display: block;
width: 80rpx !important; /*滚动条宽度*/
height: 20rpx !important; /*滚动条高度*/
}
/deep/.el-table__body-wrapper::-webkit-scrollbar-track {
border-radius: 10px !important; /*滚动条的背景区域的圆角*/
-webkit-box-shadow: inset 0 0 6px rgba(238,238,238, 0.3) !important;
background-color: #eeeeee !important; /*滚动条的背景颜色*/
}
/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 10px !important; /*滚动条的圆角*/
-webkit-box-shadow: inset 0 0 6px rgba(145, 143, 0143, 0.3) !important;
background-color: rgb(145, 143, 143) !important; /*滚动条的背景颜色*/
}
感谢这位大佬
最后
以上就是能干胡萝卜为你收集整理的Element UI中的table组件添加横向滚动条转载的加上自己的理解和问题的全部内容,希望文章能够帮你解决Element UI中的table组件添加横向滚动条转载的加上自己的理解和问题所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复