vue+element美化table样式+美化浏览器滚动条样式(兼容IE)+隐藏滚动...

vue+element美化table样式+美化浏览器滚动条样式(兼容IE)+隐藏滚动...

2023年6月20日发(作者:)

vue+element美化table样式+美化浏览器滚动条样式(兼容IE)+隐藏滚动条样式。。。表格样式-公共样式⾥加:

.el-table__body-wrapper::-webkit-scrollbar { width: 6px;

height: 6px;

}.el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 3px;}公共浏览器样式 :

::-webkit-scrollbar { width: 6px; height: 6px;}::-webkit-scrollbar-thumb { background-color: #d5d5d5; border-radius: 5px;}隐藏滚动条-可以⿏标滚动(兼容版):

其中通过其他途径计算出了滚动条的宽度是17px,⽽且⽤calc这个⽅法来计算多出来的滚动条宽度,⽽⽗级元素的overflow:hidden;此时就起作⽤了,这种做法兼容各个浏览器.el-card__body{ height:100%; overflow-y: scroll; width: -webkit-calc(100% + 17px); width: -moz-calc(100% + 17px); width: calc(100% + 17px);}vue ⿏标移上去显⽰滚动条,⿏标离开消失:jq:$().hover(function(){ $().css("overflow","auto")},function(){ $().css("overflow","hidden")}) element有⼀个隐藏组件:内容element tree加滚动条时注意:.el-tree>.el-tree-node{min-width: 100%;display:inline-block;}

发布者:admin,转转请注明出处:http://www.yc00.com/news/1687258809a324.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信